css 背景图铺满

如何让 CSS 背景图铺满整个页面

在网页设计中，背景图是一个非常重要的元素，能够为页面增添美感和个性化。但是，有时候我们会遇到一个问题，就是如何让 CSS 背景图铺满整个页面？

下面，我将为大家介绍几种实现方法。

方法一：使用 background-size 属性

background-size 属性可以控制背景图的大小，通过设置为 cover，可以让背景图铺满整个页面。

body {
  background-image: url('your-image-url');
  background-size: cover;
}

方法二：使用 background-attachment 属性

background-attachment 属性可以控制背景图的滚动方式，通过设置为 fixed，可以让背景图固定在页面上，从而铺满整个页面。

body {
  background-image: url('your-image-url');
  background-attachment: fixed;
}

方法三：使用伸缩布局

使用伸缩布局可以让页面自适应不同的屏幕尺寸，同时也可以让背景图铺满整个页面。

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url('your-image-url');
  background-size: cover;
}

以上就是三种让 CSS 背景图铺满整个页面的方法，希望对大家有所帮助。