```markdown

HTML 背景图片水平居左垂直居中

在网页设计中，背景图片的定位是非常重要的。通过适当的设置，我们可以控制背景图片在页面中的显示效果。本文将介绍如何在 HTML 中设置背景图片使其水平居左，垂直居中。

基本语法

使用 CSS 来控制背景图片的显示位置。具体来说，可以使用 background-image、background-position 和 background-repeat 属性来实现。

示例代码

```html

```

关键属性解析

1. background-image
   用于设置背景图片。你需要替换 your-image.jpg 为你自己的图片路径。

2. background-position
   该属性用于指定背景图片的位置。left center 表示图片水平居左，垂直居中。

3. left 表示图片的水平位置靠左。

4. center 表示图片的垂直位置居中。

5. background-repeat
no-repeat 表示禁止背景图片重复显示。这样图片只会显示一次。

6. background-size
auto 表示背景图片保持其原始大小。如果你希望图片根据容器的大小进行缩放，可以使用其他值，如 cover 或 contain。

实现效果

• 背景图片会保持原始大小，水平居左对齐，垂直方向居中。
• 这种设置通常用于需要固定图片背景，并且图片不需要随页面尺寸变化的情况。

总结

通过 CSS 的 background-position 属性，我们可以轻松实现背景图片的水平居左和垂直居中。你可以根据自己的需求调整图片的显示效果，打造更美观的页面布局。 ```