Responsive logo (image replacement) in html5boilerplate
- by Barbara
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/
