CODEWITHSUNDEEP
htmlcssinternet-explorer-8
Chetana Kestikar
Chetana Kestikar

Reputation: 570

Background image appearance in IE8

I have a div having class as "gradient_back" to which i have applied a background. The div looks ok in chrome and mozilla. But in ie8 it doesn't get expanded as needed.

Here is the class 'gradient_back':

.gradient_back{
   width:100%;
   float:left;        
   background:url(images/gradient.gif) repeat-x 0 0;      
   background-size:auto 100%;
 }

I am not understanding this weird behaviour in ie8. Please help me resolve the problem.

Upvotes: 0

Views: 156

Answers (3)

Spudley
Spudley

Reputation: 168655

IE8 does not support the CSS background-size feature. Therefore your background-size:auto 100% will not have any effect; no scaling will occur, and the background will be displayed in IE8 without stretching to fill the box.

You have a few choices:

  1. Resize your background graphic manually so that it's the correct size without needing CSS to scale it.

  2. Use a polyfill for background-size, such as the one in CSS3Pie.

  3. Use feature detection (or browser detection if you insist) to detect whether the browser supports background-size, and provide an alternative imgage or even just a plain solid colour if it doesn't.

  4. Use an alternative feature like CSS Gradients. This is also not supported in IE8, but again you could use a polyfill for this (again, CSS3Pie has this covered).

Upvotes: 1

Rajnikant Kakadiya
Rajnikant Kakadiya

Reputation: 2265

I think so, you should change some html like this.

<style type="text/css">
.top-gradient{
    width:100%;
    float:left;        
    background:url(images/top-gradient.gif) repeat-x 0 top;  
}
.bottom-gradient{
    width:100%;
    float:left;        
    background:url(images/bottom-gradient.gif) repeat-x 0 bottom;  
}
</style>

<div class="top-gradient">
    <div class="bottom-gradient">Your page content will go here</div>
</div>

Upvotes: 1

Quentin
Quentin

Reputation: 943207

I am not understanding this weird behaviour in ie8.

The first version of Internet Explorer to support background-size was version 9.

Please help me resolve the problem.

I'd use CSS gradients and fallback to a solid colour in older browsers.

Alternatively, you could try positioning the background image at 100% 100% and not scaling it.

Upvotes: 3

Related Questions