大背景图像和屏幕尺寸

Question

我正在创建一个网站,它将使用我无法平铺的图像.我需要这个图像来覆盖整个背景屏幕.但是,我希望这适用于大型显示​​器和小型显示器.

我应该制作一个大的背景图像并使用它来缩小它,background-size还是应该创建不同大小的同一图像的多个版本,然后使用CSS3媒体查询来选择应该显示哪个图像？如果是这样,我应该使用屏幕大小的断点？

Answer 1

您可以使用background-size属性设置为contain或cover.这对于照片背景(与图案相对)特别有效,其中缩放伪像不那么明显.

比较两者:包含 vs 封面

请记住为IE8和under设置一个备用规则(只需要一个拉伸的背景即可).

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