CODEWITHSUNDEEP
internet-explorerbackgroundcss
Melros
Melros

Reputation: 1213

IE 8: background-size: auto 100%, working solution?

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?

Upvotes: 0

Views: 8371

Answers (2)

Andres Gallo
Andres Gallo

Reputation: 681

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.

Upvotes: 1

Jitender
Jitender

Reputation: 7971

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')";

Upvotes: 0

Related Questions