CODEWITHSUNDEEP
htmlcssinternet-explorer-8
SearchForKnowledge
SearchForKnowledge

Reputation: 3751

IE8 stretches background image outside of DIV

<div id="subpageMain">    
<div id="subpageHeaderImageSection">
    <div id="subpageHeaderLeft">
    </div>
</div>
</div>

#subpageHeaderImageSection {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 400px;
}
#subpageHeaderLeft {
    position: absolute;
    left: 0;
    top: 0;
    float: left;
    width: 100%;
    height: 100%;
    background: url('../theImages/subpageHeaderImage.png') no-repeat;
    background-size: 100% 100%;
}

#subpageMain {
    position: relative;
    margin-left: 295px;
    margin-right: 10px;
    padding-bottom: 43px;
    top: 50px;
 }

This is what I see:

enter image description here

Why does IE8 take the background image and stretch it too much that the right content doesn't show and goes out of the screen?

How do I fix it?

Upvotes: 0

Views: 89

Answers (2)

gilly3
gilly3

Reputation: 91487

IE8 does not support the CSS background-size attribute (see the compatibility table at MDN). To support IE8, you'll need to use an <img> element instead and set max-width: 100%; max-height: 100%;.

Upvotes: 1

Petar Vasilev
Petar Vasilev

Reputation: 4735

IE8 can't stretch the background out of the div. However, it looks like the div with id #subpageHeaderLeft is stretched to the right due to the fact that it has width:100%

Upvotes: 0

Related Questions