大背景图像和屏幕尺寸

Question

我正在创建一个网站，该网站将使用我无法拼贴的图片。我需要这个图像来覆盖整个背景屏幕。但是，我希望这适用于大型显示​​器和小型显示器。

我应该使用background-size创建一个大的背景图像并缩小它，还是应该创建不同大小的同一图像的多个版本，然后使用CSS3 Media Queries选择应该显示哪个图像？如果是这样，我应该使用屏幕大小的断点吗？

Answer 1

您可以将background-size属性设置为contain或cover。这对于照片背景（与图案相对）特别有效，其中缩放伪像不那么明显。

比较两者：contain vs cover

请记住为IE8及以下设置回退规则（只需延伸背景即可）。

Answer 2

我最终根据StatCounter的信息选择了五个断点：

这将持续到2012年12月。

根据这些数字，我的测试，并与其他人交谈，我选择了以下选项：

/*Monitors Large than 1920px, image has "soft" edges to blend into background */
@media (min-width:1921px){
    html, body{
background: url(/images/backgrounds/1920-bg-large.jpg) no-repeat center top fixed #190303;
background-size:100% auto;
    }
}

/* Mointores ranging from 1367px - 1920px */
@media (min-width:1367px) and (max-width:1920px){
html, body{
background: url(/images/backgrounds/1920-bg.jpg) no-repeat center top fixed #190303;
background-size:100% auto;
    }
}

/* Mointores ranging from 769px - 1366px */
@media (min-width:769px) and (max-width:1366px){
html, body{
background: url(/images/backgrounds/1366-bg.jpg)  no-repeat center top fixed #190303;
background-size:100% auto;
    }
}
/* Tablets like the iPad 2 and iPad Mini */
@media (max-width:768px){
html, body{
background: url(/images/backgrounds/768-bg.jpg)  no-repeat center top fixed #190303;
background-size:100% auto;
    }
}

/* At a certain point the Background images become irrelevant as they are hidden behind other elements. Changed to a solid BG */
@media handheld, only screen and (max-width: 640px) {
html, body{
background:#190303;
    }
}

Answer 3

body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-size:100% 100%;
}

这应该在每个屏幕的每个浏览器中拉伸它。

我会在所有这些中使用大的。