1

my html code

<div id="content_main"></div>

css

        #content_main
{
    width:1024px;
    height:150px;
    background:url('../images/Orange.jpg');
    background-repeat:no-repeat;
    background-size:1024px 150px;
    -moz-background-size: 1024px 150px;
    -o-background-size: 1024px 150px;
}

background-size is not working in IE8,How to fix this problem,I dont have any idea,Please help me.

Prashobh
  • 9,216
  • 15
  • 61
  • 91

4 Answers4

2

IE8 does not support background-image options. You can use the caniuse.com website to see browser support matrices for various HTML5 features like background-size. Alternatively, if IE8 support is required, you'll need to use an <img> tag set behind your <div id="content_main">

Follow @ahsan's recommendation to check out this other similar question which contains some polyfill suggestions and an ms-filter work-around for background-size in IE8

Community
  • 1
  • 1
potench
  • 3,802
  • 1
  • 28
  • 39
0

Please check this reference about background property: http://www.jacklmoore.com/notes/ie-transparency-problems

RAN
  • 1,443
  • 3
  • 19
  • 30
0
#content_main{

width:1024px;
height:150px;
background:url('../images/Orange.jpg');
background-repeat:no-repeat;
background-size:1024px 150px;
-moz-background-size: 1024px 150px;
-o-background-size: 1024px 150px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/Orange.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/Orange.jpg', sizingMethod='scale')";

}

0

Stretch background image using CSS3 background-size: cover; and background-size: contain;, in IE8 too.

How to use it?

Upload backgroundsize.min.htc to your website, along with the .htaccess that will send the mime-type required by IE (Apache only — it's built in nginx, node and IIS).

Everywhere you use background-size in your CSS, add a reference to this file.

.selector { 
    background-size: cover;
    /* The url is relative to the document, not to the css file! */
    /* Prefer absolute urls to avoid confusion. */
    -ms-behavior: url(/backgroundsize.min.htc);
}

The elements styled this way should have a position: relative; or position: fixed; and a z-index. If not, they will be given a position: relative; and z-index: 0;.

Arul
  • 7
  • 3