Question

我有一个应用于身体的图像，但是它不能覆盖所有屏幕尺寸。

这是我的HTML：

<body class = "bg" style=" background-image: url(<?= list1[0]; ?>); height: 100%; margin: 0; background-position: center; background-repeat: no-repeat; background-size: cover;">

如何使其覆盖所有屏幕尺寸？我也愿意接受其他任何选择。

Answer 1

这足以完成工作

body, html {
    height: 100%;
}

.bg {
    background-image: url("your_image.png");
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

Answer 2

正如其他人回答的那样，您可以使用简单的html＆css做到这一点。这是一个快捷方式属性：

body, html {
    height: 100%;
    background: url("url/of/your/image.png") no-repeat cover;
}

以下是有关快捷方式background属性和全屏images的更多信息。

Answer 3

简单使用css并输入

.bg {
    top:0%;left:0%;width:100%;height:100%;
}

Answer 4

html { 
  background: url('https://images.unsplash.com/photo-1592819005124-1401b90865dd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

<html>
  <body>
    <!-- Other HTML -->
  </body>
</html>

有关更多信息，请阅读CSS技巧中的this article。

图片无法覆盖所有屏幕尺寸

4 个答案: