正确对齐/定位标题图像背景

Question

我目前正在处理一个网站，但在主标题区域中对齐/定位背景图像时遇到问题。

我希望在那里可以完全看到图像。当我缩小到网站的移动版本时，我希望它也能正常工作。

这里是问题的截图，图片刚好居中（我也用过大图）：

下面是我的 CSS 代码：

.header-six .header-t {
    padding: 30px 0;
    text-align: center;
    background-image: url("/image.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

Answer 1

你试过background-size: cover吗？

在 w3schools 上定义为：

“调整背景图像的大小以覆盖整个容器，即使它必须拉伸图像或从边缘剪掉一点点”

建议看一下background-size的描述页面，更好地了解如何正确使用它：https://www.w3schools.com/cssref/css3_pr_background-size.asp

Answer 2

.header-six .header-t {    
width: 100%;}

这可能会有所帮助。