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

问题描述

我正在创建一个网站，要使用我无法平铺的图片。我需要这个图像来覆盖整个背景屏幕。但是，我想要在大型显示器和小型显示器上工作。

我应该使用一个大的背景图片，并使用 background-size 相同的图像在各种大小然后使用CSS3媒体查询选择应显示哪个图像？

解决方案

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

这是到2012年12月。

根据这些数字，我的测试，并与其他人说话我选择了以下选项： / p>

  / *监视器大于1920px，图像具有柔和边缘以融入背景* / 
 @media -width：1921px）{
 html，body {
 background：url（/images/backgrounds/1920-bg-large.jpg）no-repeat center top fixed＃190303; 
 background-size：100％auto; 
} 
} 
 
 / * Mointores从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从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; 
} 
} 
 / *平板电脑像iPad 2和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; 
} 
} 
 
 / *在某一点上，背景图像变得不相关，因为它们隐藏在其他元素之后。更改为固体BG * / 
 @media掌上电脑，只有屏幕和（最大宽度：640像素）{
 html，body {
 background：＃190303; 
} 
} 
  

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.

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?

解决方案

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

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屋！