I'm using the responsive version of html5 boilerplate via initializr.com. My site uses a custom logo so i added the .ir class to h1

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

like this

<h1 class="title ir">h1.title</h1>

The documentation says

Add the .ir class to any element you are applying image-replacement to. When replacing an element's content with an image, make sure to also set a specific background-image: url(pathtoimage.png);, width, and height so that your replacement image appears.

So I added to the code these lines

.ir {
background-image: url(http://i.imgur.com/yYnyJ.jpg);
background-size: 100% auto;
width:450px;
height:450px
}

The problem are the specific width and height. I can't get rid of them but the logo is not responsive this way. Ideas? Here's the fiddle. http://jsfiddle.net/qeW3e/