Question

我想将响应式图像设置为整页的背景。

这是我的CSS代码

background-image: url('../images/img1.jpg'); 
background-repeat: no-repeat, repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;

但是当我在小屏幕上打开我的页面时，我遇到了问题。它不会显示它应该是。

请帮我解决这个问题。

Answer 1

在大屏幕中，它应该是背景大小：封面和小屏幕（媒体查询）背景大小：包含;另外添加background-position：center。此外，如果您可以在JSfiddle中向我们展示，那么很容易修复。

Answer 2

也许尝试将宽度和高度设为100％

Answer 3

首先你应该清除自己的风格，不再需要背景大小的前缀了，还有＆＃34;背景重复＆＃34;财产可以＆＃34;重复＆＃34;或＆＃34;不重复＆＃34;，不是两个在同一时间。您还想设置背景位置。所以你的css代码应该是这样的：

background-image: url('../images/img1.jpg'); 
background-repeat: no-repeat; 
background-size: cover;
background-position: center center;

之后，您必须将此样式设置为正确的元素，对于您的情况，您可以使用body标记。所以你的最终代码应该是这样的：

body { 
     background-image: url('../images/img1.jpg'); 
     background-repeat: no-repeat; 
     background-size: cover;
     background-position: center center;
 }

Answer 4

这对我有用： -

body {
  background-image: url(images/background-photo.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color:#464646;
}

Answer 5

您应该尝试@Media Css查询IT将适合您

Answer 6

您需要使用background：而不是background-image：

 background: url(../images/img1.jpg)no-repeat center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Answer 7

尝试使用jquery-backstretch插件。 https://github.com/srobbin/jquery-backstretch

背景图片覆盖整个页面

7 个答案: