css背景图片居中代码

.container {
  background-image: url('your-image-url.jpg');
  background-repeat: no-repeat;
  background-position: center center; /* 水平垂直居中 */
  background-size: cover; /* 或者使用 contain 根据需要调整 */
}

.container {
  background: url('your-image-url.jpg') no-repeat center center / cover;
}

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 设置容器高度为视口高度 */
}

.container::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('your-image-url.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  z-index: -1; /* 确保图片在内容下方 */
}

.container {
  display: grid;
  place-items: center; /* 水平和垂直居中 */
  height: 100vh; /* 设置容器高度为视口高度 */
}

.container::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('your-image-url.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  z-index: -1; /* 确保图片在内容下方 */
}