Menu
#section{
position: absolute;
top:0;
height: 100%;
width:100%;
background: url("http://cdn9.howtogeek.com/wp-content/uploads/2010/05/ubuntu-human-1440x900.jpg") no-repeat center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}<body>
<section id="section"></section>
</body>When background-size is set to cover the image changes its size to cover the window when window size is changed.
Is there any way to cover background totally at the start and then when after window size is changed to make the image unresponsive ?
585
If you're looking to make your background image fill the screen on load, and then not resize afterwards (which i would reconsider - but maybe im not seeing the big picture, no pun intended ;) )
A possible option is to load the image in a seperate div, set the z-index:-9999; (which will make the div sit below all the other divs), and then use javascript to determine the size of the image/div when it covers the whole page and change the size of the div with javascript element.style.width = ""
window.onload = function(){
theWidth = document.getElementById("background").offsetWidth;
theHeight = document.getElementById("background").offsetHeight;
document.getElementById("background").style.width = theWidth;
document.getElementById("background").style.height = theHeight;
}#background{
position: absolute;
top:0;
height: 100%;
width:100%;
background: url("http://cdn9.howtogeek.com/wp-content/uploads/2010/05/ubuntu-human-1440x900.jpg") no-repeat center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}<body>
<section id="background"></section>
<section id="your_content"></section>
</body>If you wish to make it so that it does not overflow and give you horizontal scrolling after it loads, wrap the background in a <div style = 'max-width:100%; overflow:hidden; position:relative;'> div - overflow:hidden; will hide all content that overflows that divs bounds (like the div holding the image inside of it which will be at the original width while current width could be smaller) and position:relative; is needed for the overflow:hidden; to apply (IIRC - if i remember correctly)
117
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
