調整div背景大小

一開始我想爲我的英語道歉..
但是削減追逐 - 我做我的第一個網站，我有一個div背景問題。當我調整瀏覽器的窗口像這樣http://kamilnizinski.pl或http://rumblelabs.com時，我想改變div的背景分辨率 - 當您調整窗口大小時，您會發現背景完全改變了分辨率。在我的CSS文件我有調整div背景大小

.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？
非常感謝您的回答。

來源

2015-04-06 ray

林不完全知道如何你提到的這樣的網站，但我會建議使用@media標籤在你的CSS

媒體標籤允許您根據屏幕尺寸的CSS規則。

看看這個谷歌的基本面寫了@media和屏幕尺寸。 Use CSS media queries for responsiveness

我建議使用此功能的原因是，您可以通過屏幕大小控制多個圖像，但不僅僅是文本或按鈕。

來源

2015-04-06 15:01:15 Beyerz

簡單的例子：

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

JS：

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

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

doResize();

來源

2015-04-06 15:03:46 aleha

調整div背景大小

回答

相關問題