css body背景图全屏不论分辨率大小

要实现“CSS body背景图全屏不论分辨率大小”的效果，需要遵循以下步骤：

步骤一：准备背景图片

首先，需要准备一张适当尺寸的背景图片，并把它保存到网站目录下。

步骤二：设置body的样式

接下来，需要设置 body 元素的样式。对于这个问题，不能简单地使用 body { background-image: url('bg.jpg'); } 就算完成任务，因为当页面缩放或分辨率更改时，图像大小不会适应屏幕大小而且会失真。因此，需要结合其他属性一起使用：

body {
  background-image: url('bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

首先， background-image 属性设置了背景图片的路径。接下来，使用 background-repeat: no-repeat; 让图片不重复。然后，使用 background-size: cover; 让图片可以适应整个屏幕，无论分辨率大小，以便图片始终填满整个页面背景。最后，通过 background-position: center center;，可以使得图片始终保持中心对齐，无论如何缩放。

步骤三：扩展背景图片

当在较大的显示器上查看网站时，可能需要扩展背景图片，以匹配屏幕分辨率。在这种情况下，可以为图像添加一个补丁，以便使其可重复循环，直到整个页面都被覆盖为止。这个过程需要在 HTML 中添加一个 div 进行包裹，更改CSS进行样式调整：

<div class="bg-img"></div>

body {
  background-image: url('bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.bg-img {
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: url('bg.jpg');
  transform: scale(1.2);
}

在 HTML 中添加一个 div 元素，并为其设置一个名为 .bg-img 的类。然后，通过 position: fixed; 让 .bg-img 永远定位于画面正中。接着，使用 overflow: hidden; 进行溢出处理，以确保图像永远出现在可见区域。最后，使用 transform: scale(1.2); 适当缩放背景图片，以覆盖整个页面。

通过以上三个步骤的设置，就可以让网站的背景图片始终适应浏览器大小，并覆盖整个屏幕，实现CSS Body背景图全屏，不论分辨率大小的效果。