Resizing a div background

Question

At the beginning I'd like to apologize for my english..
But cutting the chase - I doing my first website and I have a problem with div background. I want to changing the background resolution of div when I resize the browsers' window like this http://kamilnizinski.pl or http://rumblelabs.com - as you can see the background is fully changing resolution when you resize window. In my CSS file I have

.background { 
height: 100%; 
background-image: url('img/background.png'); 
background-repeat: no-repeat; 
background-attachment: fixed; 
background-size: cover; 
background-position: center; } 

so I get a part of a image without resizing. So my question is - how can I get this effect? I must change something in CSS or I must use javascript/jQuery?
Thank you in advance for your answers.

Answer 1

Simple example:

http://jsfiddle.net/xkaL2rho/

html:

<div class='background' />

css:

.background{
    background-image: url(http://blendr.io/wp-content/uploads/2014/05/Polygon-Background-2.jpg);
    background-size: cover;
    height:100%;
}
html, body{
    height:100%;
    width:100%;
}

Another way is using javascript:

http://jsfiddle.net/xkaL2rho/1/

css:

.background{
    background-image: url(http://blendr.io/wp-content/uploads/2014/05/Polygon-Background-2.jpg);
    background-size:cover;
}
html, body{
    height:100%;
    width:100%;
}

js:

$(window).resize(function(){
    doResize()    
});

function doResize(){
    var width = $(window).width();
    var height = $(window).height();
    $('.background').css({'width':width+'px',height: height+'px'})
}

doResize();

Answer 2

Im not entirely sure how the sites you mentioned are doing this, but I would suggest using the @media tag in your css

The media tag allows you define css rules based on the screen size.

Check out this Google fundamentals write up about @media and screen sizes. Use CSS media queries for responsiveness

The reason I suggest using this is that you can control more than just images but anything like text or buttons by screen size.