浏览器中任何分辨率的完整背景图像大小答案

【问题标题】：Full background Image size in browser in any resolution浏览器中任何分辨率的完整背景图像大小
【发布时间】：2014-09-04 13:59:25
【问题描述】：

我正在尝试创建一个完整的background 网站。现在我正在使用1920*1080 resolution 屏幕。但我必须适应任何分辨率的背景。我使用以下css

html {
    background:#65b5cc url(webbg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
   -moz-background-size: cover;
    -o-background-size: cover;
     background-size: cover;
    }

但这并不是在浏览器重新调整大小时重新调整背景大小，还有一个疑问是我将背景用作 jpg 图像大小为 1627*768 。那是正确的尺寸吗？我想将矢量类型的图纸显示为我的背景，因此希望以更小的尺寸获得最高质量。指导我。

谢谢

【问题讨论】：

尝试背景尺寸：100%;
谢谢你的工作..你能说出完美的背景图片大小（jpg图片大小）

标签： html css image background

【解决方案1】：

Use this property "background-size:100%"

【讨论】：

你能说出完美的背景图片尺寸（jpg图片尺寸）
使用图像大小最大 1920 X 800px。适用于所有将在正文中完美执行的分辨率。

【解决方案2】：

试试这个：

html, body {
    background: url(http://placeskull.com/100/100/) no-repeat center center fixed #65b5cc;
    // Make sure your SVG image expands to the whole window/page.
    background-size: 100% 100%;
}

如果您使用 SVG 图像，它的实际尺寸无关紧要，因为它是一个矢量文件，因此它可以缩放到任何大小而不会降低质量。

See Example

【讨论】：

:你能说出完美的背景图片尺寸（jpg图片尺寸）
适合什么？如果块尺寸为 200x200 像素，那么分辨率为 200x200 像素的图像将非常完美。
对于非矢量图像，图像越大，分辨率/质量越好。但这是以牺牲性能为代价的：更大的文件大小。尽可能使用 SVG 文件，否则使用目标受众屏幕尺寸的平均尺寸。