CODEWITHSUNDEEP
csscss3pie
Joel
Joel

Reputation: 21

Multiple background images not working in IE8 and IE7

Below is a simple code in which I have implemented multiple background images to body, but this code does not work in IE 7 and 8 whereas it works in all other browsers. I have used PIE.htc which is relative to the html document,but still no success. Please help me to solve this example.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body style="background: url(header_top_border.png) repeat-x, url(bg_1px.jpg) repeat-x;  behavior: url(http://localhost/mutliple_bg/PIE.htc);
-pie-background:url(header_top_border.png) repeat-x, url(bg_1px.jpg) repeat-x; position:relative; zoom:1; z-index:1;">
</body>
</html>

Upvotes: 0

Views: 968

Answers (3)

jhunlio
jhunlio

Reputation: 2660

use div positionrelative and absolute

i think this is the easy way to fix cross browser problem hope it help...

click here for working fiddle

html

<div class="parent">
    <div class="colorLeft"></div>
    <div class="contentArea"></div>
</div>

css

.parent {
    float:left;
    width:100%;
    height:200px;
    background-color:#555;
    position:relative;
    z-index:1;
}
.colorLeft {
    width:50%;
    float:left;
    height:200px;
    background-color:blue;
    position:absolute;
    z-index:-1;    
}
.contentArea {
    width:400px;
    background-color:#fff;
    height:180px;
    margin:10px auto;
}

Upvotes: 0

MervinJ
MervinJ

Reputation: 11

Sorry hasty read of your question, just noticed your using pie. PIE doesn't support multiple backgrounds on BODY element;

Solution: create div container for body.

Upvotes: 1

MervinJ
MervinJ

Reputation: 11

Multiple backgrounds are only supported by IE9 and above.

Upvotes: 0

Related Questions