CODEWITHSUNDEEP
htmlcssbackground
Prashobh
Prashobh

Reputation: 9542

Background image size is not working in IE 8

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.

Upvotes: 1

Views: 4411

Answers (4)

Arul
Arul

Reputation: 7

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;.

Upvotes: 0

Vineeth.T.R
Vineeth.T.R

Reputation: 1

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

}

Upvotes: 0

potench
potench

Reputation: 3842

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

Upvotes: 2

RAN
RAN

Reputation: 1453

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

Upvotes: 0

Related Questions