Изменение размера фона div

Question

В начале я хотел бы извиниться за мой английский.
Но резка погони - я делаю свой первый веб-сайт, и у меня проблема с фоном div. Я хочу изменить разрешение экрана div при изменении размера окна браузера http://kamilnizinski.pl или http://rumblelabs.com - как вы можете видеть, фон полностью меняет разрешение при изменении размера окна. В моем файле CSS у меня есть

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

поэтому я получаю часть изображения без изменения размера. Поэтому мой вопрос: как я могу получить этот эффект? Я должен что-то изменить в CSS, или я должен использовать javascript/jQuery?
Заранее благодарю вас за ответы.

Answer 1

Я не совсем уверен, как сайты, которые вы упомянули, делая это, но я предложил бы использовать @media тег в вашем CSS

СМИ тег позволяет определить правила CSS на основе размера экрана.

Ознакомьтесь с основными принципами Google, которые содержат информацию о @media и размерах экрана. Use CSS media queries for responsiveness

Причина, по которой я предлагаю использовать это, заключается в том, что вы можете управлять не только изображениями, но и текстом или кнопками по размеру экрана.

Answer 2

Простой пример:

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%; 
} 

Другой способ использует 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%; 
} 

ЯШ:

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

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

doResize();