Responsive logo (image replacement) in html5boilerplate
Posted
by
Barbara
on Stack Overflow
See other posts from Stack Overflow
or by Barbara
Published on 2012-10-05T15:01:08Z
Indexed on
2012/10/06
3:37 UTC
Read the original article
Hit count: 222
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/
© Stack Overflow or respective owner