我如何使我的背景图像适合整个屏幕CSS

Question

css：

    body{
      background-image:url("img-address");
    }

我希望图像不要重复多次，而要跨越整个屏幕。我不想使用我想使用background-image的普通图像。

Answer 1

您可以使用background-size：

https://www.w3schools.com/cssref/css3_pr_background-size.asp

body {
  background-size: 100% 100% ;
}

或

body {
  background-size: cover;
}

Answer 2

使用background-repeat: none和background-size: cover

Answer 3

尝试使用本文所述的background-size: cover;：https：//css-tricks.com/perfect-fuct-fuct-page-background-image/

它将使图像拉伸以填充可用的空间并相应地扩展到其容器的大小。

让我知道它的发展：(

Answer 4

您可以使用以下内容使其适合：

background-size:cover; Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
background-size:contain; Resize the background image to make sure the image is fully visible

这样就不会重复： background-repeat: no-repeat;

https://www.w3schools.com/cssref/csss3_pr_background-size.asp