调整网页大小时如何缩小背景图像？答案

【问题标题】：How do I make my background image crop down when I'm resizing the web page?调整网页大小时如何缩小背景图像？
【发布时间】：2016-01-05 02:03:35
【问题描述】：

现在，当我调整背景图像的大小时，它不会扭曲图像大小（这很好），但也不会裁剪它。例如，我的背景图片是页面顶部的横幅，左侧有图形。当我从左向右拖动窗口时，图形保持在屏幕左侧的位置。我希望在调整图像大小时裁剪图像（以及我的所有网站内容）。（这样浏览器就不会尝试将所有内容（包括标题）都放在现在较小的页面上。）

这是我的背景图片的css代码

body {
background-image: url("images/header.jpg");
background-repeat: no-repeat;
margin: 0;
padding: 0; }

另请注意：我的所有内容都将以网页为中心——如果这有任何帮助的话。

【问题讨论】：

欢迎堆栈溢出。你试过background-size:cover;吗？不要忘记供应商前缀:)
嗯，还没用。
更新了我的答案。我有点困惑。如果您希望背景图像填满整个身体，请使用背景大小的封面。至于页面不调整大小，只需将 body 和 html 的宽度设置为 100%。要使图像居中，请使用 background-position:center center;

标签： html css image background-image

【解决方案1】：

body {
background-image: url("images/header.jpg");
background-repeat: no-repeat;
margin: 0;
padding: 0;
background-size: cover; 
}

【讨论】：

说真的老兄？你偷了我的答案！这样做不会导致堆栈溢出。
您好，非常感谢您的回答，但是背景大小的封面实际上只是让背景图片填满了我的整个网页，这不是它的预期用途。
@www139 - 当这种情况发生时你不讨厌它吗？你总是可以flag it
@www139 这个答案比你早五分钟发布。
我的评论是在这个答案前 3 分钟发布的（关于问题）。我开始发现 stackoverflow 对我的口味来说有点太有竞争力了。

【解决方案2】：

body, html {
    width:100%;
    height:100%;
}

body {
    background-image:url("images/header.jpg");
    background-repeat:no-repeat;
    background-position:center center;
}

这是给你的 jsfiddle :) https://jsfiddle.net/www139/5wqp3622/

【讨论】：

您好，感谢您的回答 - 但它没有用。它使小图像填满了我的整个网页。无论我是否使用供应商前缀，结果也是相同的。