Question

我正在尝试学习HTML和CSS。现在我正试图让背景图像填满浏览器窗口，无论大小。我用Google搜索了100次，每一页都说了同样的话。所以我复制了代码，但它对我不起作用。当我将浏览器设置为较小的尺寸时，背景图像会重复。我不希望我只是想让它填满窗户。这是我的css。

html {
background-image:url(background.jpg);
background-size: 100%;
background-image: no-repeat-y; }

在我100％做之前，我尝试使用封面而不是也无效。当窗口最大化时，图像是全屏的，但是当我调整大小时，图像将重复。

Answer 1

使用background-size cover将完成这项工作：

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

Answer 2

要缩放，您要缩放的CSS需要位于容器本身内部，即HTML容器内的BODY;试试这个：

html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-image:url(background.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat-y;
}

Answer 3

您需要为父div <body>指定100％的高度，以便任何高度为100％的子div;将采取它的父div的高度。这是一个例子：

将您的内容包装在父div中，如下所示：

<html>
  <body>
    <div class="wrapMeTight">
      ....Your page content....
    </div>
  </body>
</html>

并将此添加到您的css：

html, body    {
    height: 100%;
}
.wrapMeTight   {
    min-height: 100%;
    height: 100%;
    background-image: url (/img.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

Answer 4

使用此：

<html>
  <head>
    <style type="text/css">
        body { background-image: url("background.jpg"); background-size: 100% 100%; background-repeat: no-repeat; height: 100vh; width: 100vh; }
    </style>
  </head>
  <body>

  </body>
</html>

CSS背景图片不会缩放

4 个答案: