css背景左对齐居中

CSS背景左对齐居中是一种非常常用的布局技巧，可以让页面看起来更加整洁美观。

body {
  background-image: url("bg.jpg");
  background-repeat: no-repeat;
  background-position-x: left;
  background-position-y: center;
}
 

其中，background-image属性指定了要使用的背景图像，background-repeat属性指定了背景图像是否要重复显示，这里设置为不重复显示。而background-position-x属性将背景图像左对齐，而background-position-y属性将背景图像垂直居中。

我们还可以使用background-position属性来同时设置背景图像的水平和垂直位置，如下所示：

body {
  background-image: url("bg.jpg");
  background-repeat: no-repeat;
  background-position: left center;
}
 

这样设置可以将背景图像左对齐，垂直居中。

除了body元素，我们还可以在其他元素上设置背景图像，并使用相同的属性来控制它们的位置和重复性。例如：

.header {
  background-image: url("header.jpg");
  background-repeat: no-repeat;
  background-position-x: left;
  background-position-y: center;
}
.footer {
  background-image: url("footer.jpg");
  background-repeat: no-repeat;
  background-position: left bottom;
}
 

以上代码中，我们分别将header和footer元素的背景图像设置为左对齐垂直居中和左对齐底部，以达到更好的布局效果。

最后，需要注意的是，在使用background-position属性时，我们可以使用关键字来代替长度值，如left、center、right和top、center、bottom。