调整 div 背景

Question

一开始我想为我的英语道歉..
但切入正题——我在做我的第一个网站时遇到了 div 背景问题。当我像这样 http://kamilnizinski.pl or http://rumblelabs.com 调整浏览器的 window 大小时，我想更改 div 的背景分辨率 - 如您所见，当您调整 window 大小时，背景完全改变了分辨率.在我的 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

我不完全确定您提到的网站是如何做到这一点的，但我建议您在 css

中使用 @media 标签

媒体标签允许您根据屏幕尺寸定义 css 规则。

查看这篇关于@media 和屏幕尺寸的 Google 基础知识文章。 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%;
}

js:

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

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

doResize();

调整 div 背景

Resizing a div background

html

javascript

css

jquery

frontend