我有
body {
background: url(images/background.svg);
}
理想的效果是，这个背景图像的宽度将与页面的宽度相等，高度改变以保持比例。例如，如果原始图像刚好是100*200(任何单位)，主体宽度为600px，背景图像最终应该是1200px高。如果窗口调整大小，高度应该自动改变。这可能吗?
目前，Firefox看起来像是先调整高度，然后再调整宽度。这可能是因为高度是最长的维度，它试图避免裁剪?我想垂直裁剪，然后滚动:没有水平重复。
此外，Chrome将图像放置在中心，没有重复，即使是明确给出background-repeat:repeat，这是默认的。
当前回答
试试这个,
element.style {
background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}
其他回答
设置背景大小没有帮助，下面的解决方案对我有用:
.class {
background-image: url(blablabla.jpg);
/* Add this */
height: auto;
}
它基本上是裁剪图像并使其适合，背景-大小:包含/覆盖仍然没有使它适合。
body{
background-image: url(../url/imageName.jpg);
background-attachment: fixed;
background-size: auto 100%;
background-position: center;
}
如果你设置min-height，例如:
min-height: 100vh;
您可以使用下面的代码来轻松地适应您的背景
body {
background: url(images/background.svg);
min-height: 100vh;
background-repeat: no-repeat;
background-size: cover;
}
试试这个,
element.style {
background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}
背景图像没有设置完美，那么他的css是有问题的，所以他的css文件更改为下面的代码
html { 背景图片:url(“example.png”); 平铺方式:不再重演; 背景位置:0% 0%; Background-size: 100% 100%; ｝
%;Background-size: 100% 100%;"
