Using inline images as background images with dynamic height

CSS background images provide great browser performance and allow you position and resize images to cover or fit to a box frame. However sometimes as a developer you might need to use inline images due to limitations out of your control. Here is an example of how that can be achieved.


There are some situations where background images might not work e.g.

• Your images come from a database
• Your CMS already outputs the images as img html tags
• You have Content Security Policy or other security restrictions which disallow inline css

So how can we turn a regular image html tag into a resized background image? First we need our image tag as html:

<img src="http://fc09.deviantart.net/fs71/i/2013/257/5/c/a_photograph_for_the_skybridge_by_alexsky0-d6m8uo3.jpg" />

To make this a background image we should put a wrapper around it:

<div class="image">
        <img src="http://fc09.deviantart.net/fs71/i/2013/257/5/c/a_photograph_for_the_skybridge_by_alexsky0-d6m8uo3.jpg" />
</div>

We can add the following css to position the image absolutely relative to the parent wrapper:

.image {
    position: relative;
    height: 300px;
    overflow: hidden;
}
.image img {
    position: absolute;
    min-height: 100%;
    min-width: 100%;
}

You can see this working here:
http://jsfiddle.net/kmturley/vftq8zs1/

But what if we don't want to fix the height of the parent? What if we want to fit the height of the content inside, whatever the length? How do we also center the image so the most important parts are always show?

The trick here is to use display table-cell. Update your html to have two columns with text and an image:

<div class="t">
    <div class="tc image">
        <img src="http://fc09.deviantart.net/fs71/i/2013/257/5/c/a_photograph_for_the_skybridge_by_alexsky0-d6m8uo3.jpg" />
    </div>
    <div class="tc desc">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu suscipit quam. Sed pellentesque lobortis leo eu mattis. Ut nec tempor eros. Mauris pellentesque, lacus a convallis pretium, ipsum ante cursus mauris, sed efficitur metus ante eget turpis.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu suscipit quam. Sed pellentesque lobortis leo eu mattis. Ut nec tempor eros. Mauris pellentesque, lacus a convallis pretium, ipsum ante cursus mauris, sed efficitur metus ante eget turpis.</p>
    </div>
</div>

And now we can change our css to add a table and table-cell properties to the divs:

.t {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.tc {
    vertical-align: middle;
}

.image {
    position: relative;
    overflow: hidden;
}

.image img {
    position: absolute;
    min-height: 100%;
    min-width: 100%;
}

Finally to make the image centered within the table cell we need to add vertical align: middle and left offsets:

.t {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.tc {
    display: table-cell;
    vertical-align: middle;
}

.image {
    position: relative;
    overflow: hidden;
}

.image img {
    position: absolute;
    min-height: 100%;
    min-width: 100%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Here is a working example of it in action:

http://jsfiddle.net/kmturley/dw77svbh/17/