大背景图片和屏幕尺寸

Question

我正在创建一个使用无法平铺的图片的网站。我需要这张图片覆盖整个背景屏幕。然而，我希望它在大型监视器和小型监视器上都能正常工作。

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

- L84

---

我建议同时使用这两种方法。准备两张图片（宽度分别为500像素和1500像素），如果屏幕宽度小于750像素，则使用500像素的图片，因为这可能是一台内存较小、带宽有限的平板电脑；否则使用1500像素的图片。同时通过CSS使它们适应屏幕大小。 - benbai123

Answer 1

您可以使用 background-size 属性设置为 contain 或 cover。这对于照片背景特别有效（与图案相反），因为缩放伪影不太明显。

比较两者：contain vs cover 记得为IE8及以下版本设置回退规则（只需拉伸背景即可）。

- Oleg

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

- L84

Answer 3

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

这应该在每个浏览器的每个屏幕上都能拉伸。

我会在所有屏幕上都使用大的那一个。

- user1934286