CSS背景图片无法缩放

Question

I'm trying to learn html and css. 我正在尝试学习HTML和CSS。 Right now I'm trying to make a background image fill the browser window no matter the size. 现在，无论尺寸大小，我都在尝试使背景图像填充浏览器窗口。 I've googled it 100 times and every page pretty much says the same thing. 我用Google搜索了100次，每个页面几乎都说同样的话。 So I copied the code and it isn't working for me. 所以我复制了代码，但对我不起作用。 When I set my browser to a smaller size, the background image repeats itself. 当我将浏览器设置为较小的尺寸时，背景图像会重复出现。 Which I don't want I just want it to fill the window. 我不希望我只希望它填满窗口。 Here's my css. 这是我的CSS。

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

Before I did 100%, I tried using cover instead and that didn't work either. 在我100％做到这一点之前，我尝试使用Cover代替，但这也不起作用。 The image is fullscreen when the window is maximized but when I resize it the image will repeat. 当窗口最大化时，图像是全屏的，但是当我调整其大小时，图像将重复。

Answer 1

Using background-size cover will do the job: 使用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

To scale, the CSS you want to scale needs to be inside a container itself, namely BODY inside the HTML container; 要缩放，要缩放的CSS必须在容器本身内部，即BODY在HTML容器内部； try this: 尝试这个：

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

You need to specify a height of 100% to the parent div <body> so that any child div with a height: 100%; 您需要为父div <body>指定100％的高度，以使任何子div具有以下高度：100％; will take the height of it's parent div. 将采用其父div的高度。 Here's an example: 这是一个例子：

Wrap your content in a parent div like this: 将您的内容包装在父div中，如下所示：

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

And add this to your css: 并将其添加到您的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

Use this: 用这个：

<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 个解决方案

解决方案1
2

解决方案2
0 已采纳 2015-03-21 07:46:12

解决方案3
0 2015-03-21 07:49:27

解决方案4
-1 2015-03-21 07:57:11

CSS背景图片无法缩放

问题描述

4 个解决方案

解决方案1 2

解决方案2 0 已采纳 2015-03-21 07:46:12

解决方案3 0 2015-03-21 07:49:27

解决方案4 -1 2015-03-21 07:57:11

解决方案1
2

解决方案2
0 已采纳 2015-03-21 07:46:12

解决方案3
0 2015-03-21 07:49:27

解决方案4
-1 2015-03-21 07:57:11