CSS3 background-size:cover showing unexpected behavior
Question
I have an HTML file as shown below. It uses the "background-size:cover" setting on element.
When I open the file using the File/Open option on IE9, it shows the background image covering the entire window. This is expected behavior.
But, when I open the same file via an Apache server (http://127.0.0.1/test.html) the background image does NOT cover the entire window horizontally..... it leaves a blank vertical strip on the right end of the window. This is NOT expected behavior.
I see the same behavior with other background image files too. It seems that when getting the HTML page from Apache server, the "background-size:cover" setting will only enlarge the image upto some extent. But when getting it using the File/Open option, it enlarges the background image enough to cover the entire element width.
And, also see similar behavior with other settings of the background-size value (eg when I set background-size:100% 100%;).
Here's the HTML file:
<html>
<head>
<style>
body
{
background:url('desert.jpg');
background-size:cover;
background-repeat:no-repeat;
}
</style>
</head>
<body>
This is a line
</body>
</html>
1 answers
solution1
1 2013-01-25 08:21:17
Try this code, it's should resolve your issue:
<style>
body
{
background: url("desert.jpg") center center fixed no-repeat;
background-size: cover;
background-color: #000;
overflow: auto;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='desert.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='desert.jpg', sizingMethod='scale')";
}
</style>
For further explanation read this article: http://cookbooks.adobe.com/post_scale_background_image_to_browser_size-17590.html
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.