0

I am trying to have a background 100% height in a div and repeat the bg on the x-axis.

With this code it works on most modern browsers:

background: url(/img/bg.jpg);
background-size: auto 100%;

But background-size doesn't work for IE <= 8. So I am looking for a solution to get this to work on IE 8 at least.

I know about the IE filter code, but this does only stretch the bg inside it's container div. But I need the bg to repeat.

Any working solutions out there? Maybe with jQuery? Polyfills?

Melros
  • 1,238
  • 2
  • 18
  • 34

2 Answers2

1

Backgroud-size is not supported. One css trick I do in cases like this is to have a real image and set as the background. Say all your content will fit in a div called <div id="myLargeBGDiv">.

You need to make that div position: relative; Then you make an image which is positioned absolutely and set it to top: 0; and left: 0;.

Then you also put your content div there as position: relative; While setting the z-index on your image and content div.

Here is a sample.

CSS

<style type="text/css">
    /*This stretches by width. Set the element's height to 100% where needed. It will work that way as well.*/
    #myLargeBgDiv {position:relative;width:100%;}

    #stretchMe {position:absolute;top:0;left:0;width:100%;height:auto;z-index:33;}

    #myContentDiv {position:relative;z-index:50;}
</style>

HTML

<!--html-->
<div id="myLargeBgDiv">
   <img id="stretchMe" src="path/to/image.png" />
   <div id="myContentDiv">
      THIS IS SOME CONTENT THAT GOES OVER THE IMAGE CREATING THE EFFECT OF BG IMAGE
   </div>
 </div>

In older browsers where position absolute does not kick elements "off flow" you may need "myContentDiv" as position absolute as well, but that places limitations which you will see in terms of height of you content. Test before to make sure it works indeed.

Sir Crispalot
  • 4,792
  • 1
  • 39
  • 64
Andres Gallo
  • 671
  • 6
  • 13
0

review this link IE 8: background-size fix

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale')";
Community
  • 1
  • 1
Jitender
  • 7,593
  • 30
  • 104
  • 210
  • Yes, that's why I am asking if there is any possibility to get it to work with another solution, a polyfill or with jQuery. – Melros Aug 17 '12 at 12:24
  • As I also mentioned in my question I am already aware of this filter code and that this only simulates a background: cover which I don't need in this case. I need a 100% height and repeat-x. – Melros Aug 17 '12 at 12:31