css 设置全屏背景图片

要在CSS中设置全屏背景图片，可以遵循以下4个步骤：

1.将背景图片设置为CSS属性background-image的值。

2.将背景大小设置为cover，这样它将覆盖整个屏幕。

3.将背景位置设置为中心以保证图片在屏幕中间，即设置background-position属性值为center。

4.确保HTML和Body元素的高度被设置为100%。

下面是具体的步骤及代码示例：

步骤1：设置背景图片

在CSS文件中，可以使用background-image属性来设置背景图片的URL地址。

body {
  background-image:url("bg-img.jpg");
}

步骤2：设置背景大小

为了使背景图片覆盖整个屏幕，我们需要将背景图片的大小设置为cover。

body {
  background-image:url("bg-img.jpg");
  background-size: cover;
}

步骤3：设置背景位置

为了使背景图片保持在屏幕中心，需要将其位置设置为center。

body {
  background-image:url("bg-img.jpg");
  background-size:cover;
  background-position: center;
}

步骤4：设置HTML和Body元素的高度

为了确保我们的背景可以填满整个屏幕，我们需要将HTML和body元素的高度设置为100%。注意这里不是body选择器，而是html,body。

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

这样我们就成功设置了全屏背景图片。

接下来，我们看下两个具体示例：

示范例子一

html, body {
    height: 100%;
}

body {
    margin: 0;
    background-image: url("https://cdn.pixabay.com/photo/2018/01/19/07/45/paper-3091372_960_720.jpg");
    background-size: cover;
    background-position: center;
}

这个例子使用了一个高清的纸张背景图，背景图在顶端，居中显示。需要注意的是设置了html和body的高度为100%。

示范例子二

html, body {
    height: 100%;
}

body {
    margin: 0;
    background-image: url("https://cdn.pixabay.com/photo/2016/10/14/19/21/waterfall-1740634_960_720.jpg");
    background-size: cover;
    background-position: center;
}

这个例子使用了一个瀑布背景图，同样地，将背景大小设置为cover，位置设置为中心，有效的把背景图片完全展现。需要注意的是也设置了html和body的高度为100%。

总之，在使用高清图片作为背景时，可以优化背景图像的大小，以加快页面载入速度，同时也要注意设置html,body元素的高度，以确保背景可以完全覆盖到整个页面。