Responsive logo (image replacement) in html5boilerplate

Question

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/

Answer 1

I think it's referring to setting the width and height on the element that your targeting rather than in the .ir css class itself.

The actual solution would probably look more like this on a site.

HTML

<div class="header">
<div class="logo"><h1 class="title ir">h1.title</h1></div>
<div class="navigation"><p>navigation goes here</p></div>
</div>

​CSS

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

    background-image: url(http://i.imgur.com/yYnyJ.jpg);
    background-size: 100% auto;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}
.header {height:300px;}
.logo {width: 30%; float:left; height: 100%;}
.logo h1 {display:block;}
.navigation {float:left; width: 65%;}

​Here's the fiddle example

http://jsfiddle.net/qeW3e/1/