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.

score 16 · Accepted Answer · answered May 24 '13 at 05:42

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.

for those who may be having confusing problems with this, be sure to ONLY set the `background-image` property, NOT the whole `background` shorthand, as setting a position will invalidate this awesome trick — Jason, Sep 17 '14 at 16:11
@Warren, Is it possible to set the maximum size? say i don't want the logo to strect 100% of the width. Say after 200px, it will stay the same. Is it possible? — Morpheus, Apr 22 '15 at 05:26

score 0 · Answer 2 · answered May 23 '13 at 19:56

0

On the div that contains the background-image:

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

answered May 23 '13 at 19:56

lockedown

594
6
15

score -1 · Answer 3 · answered Mar 11 '14 at 20:04

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.

CSS fluid image replacement?

3 Answers3