大的背景图像和屏幕尺寸 [英] Large Background Images and Screen Sizes

问题描述

我创建了一个网站，将使用一个形象，我不能瓷砖。我需要这个图像覆盖整个背景画面。不过，我想这在大型显示器以及较小的显示器工作。

I am creating a website that is going to use an image that I cannot tile. I need this image to cover the entire background screen. However, I want this to work on large monitors as well as smaller monitors.

我应该做一个大的背景图像和背景大小规模下来使用，或者我应该创建各种大小相同的图像的多个版本，然后使用CSS3媒体查询选择应该显示哪些形象？如果是的话是什么打破屏幕尺寸分，我应该使用？

Should I make one large background image and scale it down using background-size or should I create multiple versions of the same image at various sizes then use CSS3 Media Queries to choose which image should be shown? If so what break points in screen size should I use?

推荐答案

我最终选择了基于信息从StatCounter的5断点：

I ended up choosing five breakpoint based on information from StatCounter:

这是截止到2012年12月。

This is up till December 2012.

根据关闭这些数字，我的测试，并说给别人，我选择了以下选项：

Based off of these numbers, my testing, and speaking to others I chose the following options:

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

这篇关于大的背景图像和屏幕尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！