0

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>
4

3 回答 3

1

抱歉匆忙阅读您的问题，只是注意到您使用馅饼。PIE 不支持 BODY 元素上的多个背景；

解决方案：为body创建div容器。

于 2012-08-13T15:52:08.727 回答
0

多背景只支持IE9及以上。

于 2012-08-13T15:10:56.330 回答
0

使用 div 位置relative and absolute

我认为这是解决跨浏览器问题的简单方法希望对您有所帮助...

点击这里工作小提琴

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;
}
于 2013-02-21T02:57:15.613 回答