Menu
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?
769
If I do background-size: 100%, it sets both width and height to a 100%. This was pretty handy. In my case, I set "background-size: 960px 100%;" to get the desired effect.
Absolute Resizing Length measurements can be applied using: background-size: width height; By default, the width and height are set to auto which retains the original image dimensions. We can resize an image to a new size using absolute measurements such as px, em, cm, etc.
If the background-size is contain or cover : While preserving its intrinsic proportions, the image is rendered at the largest size contained within, or covering, the background positioning area. If the image has no intrinsic proportions, then it's rendered at the size of the background positioning area.
In the header's css, you can put: background: url("../images/header. png") 50% 50% / 100% no-repeat fixed; It will automatically place and size the image so it's not stretched.
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.
86
body {
background: url("...") no-repeat center center fixed;
background-size: cover;
}
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
