Background Image Position on Internet Explorer 7
Question
This is my 'brevity' HTML
<html>
<head>
<style type="text/css">
body.custom.one_sidebar {
background:#f5f5f5 url('img/bg/bg-content.png') no-repeat 50% 36.1em;
overflow-x:hidden;
}
</style>
</head>
<body class="custom one_sidebar">
<div class="header_area"></div>
<div class="content_area"></div>
</body>
</html>
The problem is that the background image location does not work in IE7. It does in IE8 and just about every other browser. Would like some help in figuring out why.
2 answers
solution1
1 ACCPTED 2012-08-28 21:41:35
that is because you mix up percent & em in the position. For IE7 you have to use 2 times the same, percent/px or em:
body.custom.one_sidebar {
background:#f5f5f5 url('img/bg/bg-content.png') no-repeat 50% value%;
overflow-x:hidden;
}
or
body.custom.one_sidebar {
background:#f5f5f5 url('img/bg/bg-content.png') no-repeat value_em 36.1em;
overflow-x:hidden;
}
solution2
0 2012-08-28 21:20:38
First, be sure you have a Doctype selected, as without one, it will trigger Quirks mode and IE will not render some shorthand background properties correctly (or at all).
Try adding display: block , and a proper width and height to the sidebar CSS. IE has known issues with rendering some properties when the element isn't strictly defined as a block element.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.