我有
body {
background: url(images/background.svg);
}
理想的效果是，这个背景图像的宽度将与页面的宽度相等，高度改变以保持比例。例如，如果原始图像刚好是100*200(任何单位)，主体宽度为600px，背景图像最终应该是1200px高。如果窗口调整大小，高度应该自动改变。这可能吗?
目前，Firefox看起来像是先调整高度，然后再调整宽度。这可能是因为高度是最长的维度，它试图避免裁剪?我想垂直裁剪，然后滚动:没有水平重复。
此外，Chrome将图像放置在中心，没有重复，即使是明确给出background-repeat:repeat，这是默认的。
当前回答
我也遇到了同样的问题，在调整浏览器尺寸时无法调整图像大小。
糟糕的代码:
html {
background-color: white;
background-image: url("example.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;
}
好的代码:
html {
background-color: white;
background-image: url("example.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-size: contain;
}
这里的关键是添加这个元素-> background-size: contains;
其他回答
设置背景大小没有帮助，下面的解决方案对我有用:
.class {
background-image: url(blablabla.jpg);
/* Add this */
height: auto;
}
它基本上是裁剪图像并使其适合，背景-大小:包含/覆盖仍然没有使它适合。
我也遇到了同样的问题，在调整浏览器尺寸时无法调整图像大小。
糟糕的代码:
html {
background-color: white;
background-image: url("example.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;
}
好的代码:
html {
background-color: white;
background-image: url("example.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-size: contain;
}
这里的关键是添加这个元素-> background-size: contains;
背景图像没有设置完美，那么他的css是有问题的，所以他的css文件更改为下面的代码
html { 背景图片:url(“example.png”); 平铺方式:不再重演; 背景位置:0% 0%; Background-size: 100% 100%; ｝
%;Background-size: 100% 100%;"
我不知道你到底在找什么，但你真的应该看看Chris coyer从CSS-Tricks写的这些优秀博客文章:
http://css-tricks.com/how-to-resizeable-background-image/
http://css-tricks.com/perfect-full-page-background-image/
阅读每篇文章的描述，看看它们是否是你要找的。
第一个回答了以下问题:
有办法使背景图像调整大小吗?也就是说，不管浏览器窗口的大小如何，都要用一张图像填充网页的背景。另外，让它随着浏览器窗口的变化而调整大小。另外，要确保它保持比例(不要拉伸得很奇怪)。此外，不会导致滚动条，只是垂直切断如果它需要。此外，在页面中作为内联标记出现。
第二篇文章的目标是获得以下内容，即“在任何时候都能覆盖整个浏览器窗口的网站背景图像”。
希望这能有所帮助。
根据https://developer.mozilla.org/en-US/docs/CSS/background-size上的建议，我总结出了以下对我有用的食谱
body {
overflow-y: hidden ! important;
overflow-x: hidden ! important;
background-color: #f8f8f8;
background-image: url('index.png');
/*background-size: cover;*/
background-size: contain;
background-repeat: no-repeat;
background-position: right;
}
