Horizontally stretching a div background image

Question

I know similar questions have been asked on this but I haven't managed to take any advice from those and get something working. A lot of advice on this topic is also geared towards making full-page background images, which isn't what i'm trying to do.

I am trying to get a background image to stretch horizontally to fit a specific div. The div itself containts child divs with content which should be displayed over the top of the background.

I have html like the following:

<div class="parent">

    <div class="child">

        <h3>My Header</h3>

        <p><a href="another.html">A link</a></p>

        <p>Some content</p>

    </div>
</div>

and css like this:

.parent{
  width: 100%;
  height: 145px;
  float: left;
  clear: both;
  background: url(../img/parent-bg.png) top left no-repeat;
}

.child{
  width: 960px;
  height: 80px;
  margin: 0 auto;
  text-align: center;
}

parent-bg.png has a gradient fill left to right and is 60 x 142 pixels, which is why I want it to stretch to fit the parent div rather than just use repeat-x (the gradient looks odd when repeated).

The CSS3 background-size:cover property does exactly what I want, but of course doesn't work in IE for versions older than 9. I was curious to see if I could find a solution that works in IE 8 and 7.

I had a look at quick play with this jquery plugin but couldn't get it working: https://github.com/louisremi/jquery.backgroundSize.js#readme. I'm not too keen on burying a style property in javascript anyway, which it was only a 'quick play'.

`background-size: 100%;`? Also: http://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-background-with-css-only — Johan, Sep 19 '12 at 14:37
Have you tried http://www.paulmccrodden.com/blog/ie-problems-css3-039background-size-cover039-and-iefilters? — Henrik Ammer, Sep 19 '12 at 14:48
@Johan.....as I said, background-size: cover does exactly what I want, but its not supported in IE 7 or 8. Same therefore applies to background-size: 100%...it's the same css property. — willrochathomas, Sep 20 '12 at 13:51
@Henrik, I did have a look at that...the conclusion of the article seem to be that he couldn't get it working though and had problems with dead links etc. I read elsewhere about other similar pitfalls around those methods, where content doesnt always work depending on environment settings. — willrochathomas, Sep 20 '12 at 13:53
Noticed the info regarding `position: fixed` on the `
` on http://css-tricks.com/perfect-full-page-background-image/ that you probably are refering to. Bummer. Seems like doing math and jQuery is the only way. — Henrik Ammer, Sep 20 '12 at 14:02

score 4 · Answer 1 · answered Oct 22 '12 at 15:08

another solution i found which works for the browsers i'm targeting (IE 7 +, last couple of versions of firefox and chrome) and more, involved using browser prefixes like so:

.parent{
    width: 100%;
    height: 145px;
    float: left;
    clear: both;
    background: url(../img/parent-bg.png) top left no-repeat;
    background-size:cover;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    -ms-background-size:cover;
}

.footer_inner{
  width: 960px;
  height: 80px;
  margin: 0 auto;
  text-align: center;
}

@rgthree's solution is probably more comprehensive in terms of browser coverage though, and involves an excellent working demo.

rgthree · Accepted Answer · 2012-09-19T15:27:51.233

Where there's a will, there's a way. You should employ a progressive enhancement technique to get the best experience. And here's how you should build this (JS Fiddle Below):

First, have an absolutely positioned <img> under your content which can have a width & height set to 100% so it stretches across.
Next, for browsers that support Background Size hide the aforementioned <img> tag and set the background on .parent with a repeat-y and a background-size:100% auto;
Finally, for browsers that support CSS Gradients use them for the background-image of your .parent

Here's a JSFiddle: http://jsfiddle.net/rgthree/k5gk7/

The JS Fiddle above works across all relevant browsers (the gradient image was randomly taken from google images and is different colors than the CSS Gradients, but you get the picture). It uses Modernizr for capability testing.

If you are not aware of Modernizr, I can't recommend it more for projects like this. It is a library which uses javascript that test for modern browser capabilities and adds classnames to the <html> tag so you can progressively enhance your webpages.

awesome, thanks a lot for producing example code. I'll try it out and give this a tick if it works. we are already using modernizr elsewhere. I had looked at using it in this page, but my initial understanding was it involved written the formatting logic purely in javascript. that example using mainly css and html is great — willrochathomas, Sep 20 '12 at 14:00
oh and useful information on the gradient too, I did slightly oversimplify the image asset description initially to keep the question clear. Its one asset which includes a stripe at the top with gradient left to right, but also a fill background underneath the stripe. its probably easier to leave the asset alone for now, but good to have this gradients code for future reference. — willrochathomas, Sep 20 '12 at 14:05

Horizontally stretching a div background image

2 Answers2