CSS fluid image replacement?

Question

Using CSS to replace text with an image is a well known practice. CSS-Tricks has a museum of some techniques ( http://css-tricks.com/examples/ImageReplacement/ ).

But none of these allows for replacement with a fluid image (for example, a logo that stretches across 100% of a fluid page layout). Is it possible to use CSS to do a fluid image replacement?

Almost all image replacement techniques use a background-image. And I know that you can set background-size: 100% . But it's not straightforward to get the height of the text element to scale with it's width because the browser doesn't consider the background image as part of the content.

I understand that any of the common image replacement techniques could be easily combined with media queries to incrementally change the size of the text element to specific height x width ratios that work. But that is incremental, not fluid.

I did find a blog post that discusses this ( http://viljamis.com/blog/2011/fluid-image-replacement.php ). But it turns out thay method actually requires putting an image in the html content. I'm looking for real text replacement.

Answer 1

Took some fiddling, but I figured out a way. The key is to use padding percentage to set the height, because padding-top and padding-bottom percentage is linked to container width (unlike height , which is linked to container height).

html

<h1 class="logo">The Logo</h1>

css

h1.logo {
    background-image: url('logo.png');
    background-size: 100%;
    width: 100%;
    padding-top: 29.8%;
    height: 0;
    text-indent: -9999px;
}

Where padding-top is calculated by dividing the image height by width.

Working example: http://jsfiddle.net/bXtRw/

I'll note that using overflow: hidden instead of text-indent: -9999px should also work. But I get unstable behavior in Firefox.

Also, using font-size: 0 instead of height: 0 produces unstable behavior in Firefox.

Answer 2

On the div that contains the background-image:

div {
    max-width: 100%;
    width: 100%;
    min-height: 300px; //Adjust this number accordingly
    height: auto;
}

Answer 3

I use a method identical to @Warren Whipple, but I usually use compass / sass . If you're not limited to using vanilla CSS, this method nicely abstracts a few pieces:

// Only works in Compass/Sass – not regular CSS!
h1.logo {

    $header-logo-image: "logo.png";

    background: image-url($header-logo-image) no-repeat;
    background-size: 100%;
    height: 0;
    padding-top: percentage( image-height($header-logo-image) / image-width($header-logo-image) );
    overflow: hidden;
    width: 100%;
}

You should just have to replace the $header-logo-image variable with the name of your image.

---

In addition, I sometimes add: max-width: image-width($header-logo-image); , which will prevent the h1 from being sized any larger than its background image.