CSS3 background-size: cover doesn't make image cover vertically
Question
I am trying to build a website with a background image that I want to always fill up the entire screen.
When the browser window is short and wide, I want the image to expand so that the top part of it fills up the entire screen length-wise and the rest of it is not visible.
When the browser window is tall and thin, I want the image to expand so that the left part of it fills up the entire screen height-wise and the rest of it is not visible.
Using the CSS3 background-size: cover property makes the former work like a charm, the latter does not. Instead, the background image is shrunk so that it is entirely visible within the narrow region available and scaled to the width, and then the rest of the page below it is simply the background color.
body {
background-color: #BF6F30;
color: black;
font-family: Georgia, "Times New Roman", sans-serif;
background: url(' ... ');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
How can I fix this problem?
2 answers
solution1
10 ACCPTED 2012-01-24 02:32:24
Are you interested in only using a CSS background image? This can be done by loading an image and constraining it with the CSS.
Would either of these examples work?
HTML
<body id="page-body">
<img class="bg" src="images/bodyBackground1.jpg">
<div class="wrapper">
</div>
</body>
CSS
html {
background: url(images/bodyBackground1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
background:#fff;
margin: 0;
padding: 0;
overflow:hidden;
}
html, body {
height: 100%;
}
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
Or this one? This one loads images from a database into an array and loads them at random, but you might be able to glean some info from this:
PHP load function
<?php
$bg_images = array(
0 => 'comp1.png',
1 => 'comp2.png',
2 => 'comp3.png',
....
);
$image = $bg_images[ rand(0,(count($bg_images)-1)) ];
$showBG = "<img class=\"source-image\" src=\"images/bg/" . $image . "\"/>";
?>
HTML
...
<body>
<?php echo $showBG; ?>
<div id="wrapper">
...
CSS
html, body {
margin:0;
height:100%;
}
img.source-image {
width:100%;
position:absolute;
top:0;
left:0;
z-index:0;
min-width:1024px;
}
These options should fill up the browser window according to the height and width.
solution2
1 2015-04-20 12:51:40
body { background: url("...") no-repeat center center fixed; background-size: cover; }
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.