css - 大背景图像和屏幕尺寸

Question

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

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

Answer 1

您可以使用background-size设置为contain或的属性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%;
}

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

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