CSS background-image不显示，WordPress Bootstrap站点代码哪里出错了？

问题核心原因 #

• 你使用的<a>标签是原生行内元素，CSS中设置的width、max-height属性对行内元素不生效，且你没有给元素设置明确的最小高度/高度，导致元素实际渲染高度为0，背景图无法正常显示。
• 额外兼容问题：background-attachment: fixed在移动端设备存在较多兼容性故障，容易出现背景错位、无法显示的问题，非必要可以删除或替换为scroll。

修复方案 #

1. 调整CSS代码 #

你可以用padding-top百分比的方式实现响应式自适应高度，完美适配不同屏幕尺寸，不会出现拉伸变形：

.header_banner{
  display: block; /* 把行内元素转为块级，让宽高设置生效 */
  width: 100%;
  /* 按你背景图的宽高比设置padding-top，比如16:9的图就是9/16=56.25%，4:3就是75%，按你的实际图片比例调整即可 */
  padding-top: 56.25%; 
  max-height: 1080px;
  background-repeat: no-repeat;
  background-attachment: scroll; /* 需要视差效果再换回fixed，否则建议保留scroll避免移动端兼容问题 */
  background-size: cover;
  background-position: center; /* 保证背景图居中显示，不会切到核心内容区域 */
  background-image: url('https://www.visionalmind.com/wp-content/themes/visionaltheme/media/photo-1499951360447-b19be8fe80f5.png');
}

如果存在主题样式冲突导致设置不生效，再按需添加!important即可。

2. 可选HTML调整 #

如果这个标签不需要做跳转功能，建议把<a>替换为<div>语义更合理，不需要加其他属性，保留class="header_banner"即可。
如果需要跳转，给<a>标签补全href属性即可。

内容的提问来源于stack exchange，提问作者Visionalmind