CODEWITHSUNDEEP
htmlcss
RegarBoy
RegarBoy

Reputation: 3521

Cover background making background-image unresponsive

#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 ?

Upvotes: 3

Views: 786

Answers (4)

Shuvo Shuvo
Shuvo Shuvo

Reputation: 329

Change background-size:cover; to background-size: 100% 100%; background-repeat: no-repeat;;

And it will be like that. 

#div{
    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;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}


<body>
    <div id="section"></div>
</body>

Visit here

Or you can use it: 

  body{
    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;
    background-size: 100% 100%;

}

  <body></body>

Or can check this link

Upvotes: 1

novalagung
novalagung

Reputation: 11502

How about remove the background-size instead. the image will be shown as it's original size.

#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;
}
<body>
    <section id="section"></section>
</body>

Upvotes: 1

Mike
Mike

Reputation: 2735

You can do apply a .cover class via jQuery on initial page load and remove it when the window gets resized, like so:

$('section#section').addClass('cover');
$(window).on('resize', function () {
    $('section#section').removeClass('cover');
});

see fiddle

Upvotes: 1

Ulad Kasach
Ulad Kasach

Reputation: 12828

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)

Upvotes: 1

Related Questions