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: .backgroundSize.js#readme. I'm not too keen on burying a style property in javascript anyway, which it was only a 'quick play'.

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./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'.

• javascript
• jquery
• html
• css

• background-size: 100%;? Also: stackoverflow./questions/1150163/… – Johan Commented Sep 19, 2012 at 14:37
• Have you tried paulmccrodden./blog/…? – Henrik Ammer Commented Sep 19, 2012 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 Commented Sep 20, 2012 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 Commented Sep 20, 2012 at 13:53
• Noticed the info regarding position: fixed on the <div> on css-tricks./perfect-full-page-background-image that you probably are refering to. Bummer. Seems like doing math and jQuery is the only way. – Henrik Ammer Commented Sep 20, 2012 at 14:02

2 Answers 2

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 prehensive in terms of browser coverage though, and involves an excellent working demo.

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):

1. First, have an absolutely positioned <img> under your content which can have a width & height set to 100% so it stretches across.
2. 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;
3. Finally, for browsers that support CSS Gradients use them for the background-image of your .parent

Here's a JSFiddle: http://jsfiddle/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 remend 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.