WordPress Header 背景图片没有响应且居中

Question

我正在为我的网站使用此 Wordpress Theme，我尝试设置居中或 full-width 图片 header，但它不起作用。图像总是被留下，我想知道如何正确地做到这一点，（没有提供主题header 添加图像选项）

这是我的CSS

#header .header__top.bg-cat-1 {
  background: url("http://localhost/pro/wp-content/uploads/2018/01/HD.png");
  background-repeat:no-repeat;
  align-content:center;
}

Answer 1

尝试以下方法css：

background-position: center;

如果你想让背景适合当前部分，试试这个：

background-size: cover !important;

如果有内联样式，但您找不到它们在哪里，您可以使用 !important，正如您在前面的代码中看到的那样。

希望对您有所帮助。

Answer 2

尽量利用background-position: center center。

background-positionCSS属性设置每个定义的背景图片的初始位置，相对于background-origin定义的背景位置图层。

background-position 的默认值为 0% 0% 这就是为什么它默认从左上角开始的原因。

#header .header__top.bg-cat-1 {
  background-image: url("http://localhost/pro/wp-content/uploads/2018/01/HD.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

引用Link:

background-position

WordPress Header 背景图片没有响应且居中

WordPress Header background image not responsive and center

css

background-position