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/

@Nelson Uhm, works for me. I could make a new one but basically I just c/p the code from the post. It doesn't show up for everyone else? — Barbara, Oct 05 '12 at 15:13
After opening the imgur image exclusively in one tab, then the jsfiddle showed it after refreshing.. can you explain "the logo is not responsive anymore" ? how do you want the logo to be responsive? — Nelson, Oct 05 '12 at 15:18
@Nelson The way it's coded right now the image-replacement works but it's not responsive. If I shrink my viewport the logo is always 400px x 400px no matter what. I want it to shrink accordingly. — Barbara, Oct 05 '12 at 15:23
What would the desired behaviour be? How big should the logo be with respect to the viewport? How fast should the logo shrink/expand as the viewport shrinks/expands? What are the minimium/ maximum dimensions for the logo? What are the proportions (`width`/`height`) for the logo? — Ana, Oct 05 '12 at 15:59

score 2 · Answer 1 · answered Oct 06 '12 at 03:34

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/

Responsive logo (image replacement) in html5boilerplate

1 Answers1