Question

好的，这个有效，海洋图片显示在背景中，但重复4次以填满整个屏幕。

<style type="text/css">
   body {background-image:url('ocean.png');}
</style>
<body>

</body>

然后改为

body {background-image:url('ocean.png') no-repeat center center;}

现在没有任何图片显示背景。

Answer 1

由于background-image无法获取更多参数 - 请将其更改为background: url...，这是在一行中设置所有参数的正确属性。

body {background: url('ocean.png') no-repeat center center;}

Answer 2

以这种方式尝试：

body {
background: url('ocean.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}

Answer 3

以下是如何做到这一点并将其拉伸到屏幕的整个高度/宽度（注意：如果它不正确，会发生一些失真）：

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

IIRC，背景大小并且能够在没有引号的情况下编写url（...）是CSS3标准的一部分。

Answer 4

您可以在背景属性中调整背景图片的大小，如下所示：

background：url（'ocean.png'）no-repeat top center 100％auto;

或

background-size：100％自动;

第一个参数是宽度，第二个参数是高度。第一个示例将图像置于顶部中心并将其拉伸以填充浏览器窗口的宽度，并按比例设置高度。您也可以使用“封面”代替“100％自动”，浏览器将以填充背景所需的任何方式填充图像。

注意：这是CSS3，因此背景大小的尺寸仅适用于较新的浏览器，IE9，Firefox 4等。