求助：WordPress个人站点全屏背景显示异常的解决办法

嘿，我帮不少WordPress用户处理过这种「背景先全屏然后缩回去」的问题，你的情况大概率是HTML和Body元素的高度没拉满，或者主题自带的容器样式把背景给挡住了，咱们一步步来搞定：

第一步：补全HTML和Body的基础样式 #

默认情况下，HTML和Body元素的高度并不是自动铺满整个浏览器窗口的，这会导致背景没法撑满全屏。先把这段CSS加上：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* 避免出现不必要的横向滚动条 */
}

第二步：优化你的背景样式 #

在你原有代码的基础上，补充几个关键属性，确保背景稳定显示：

body {
  background-image: url(https://testsite.com/wp-content/uploads/2018/04/Backround5.jpg) !important;
  background-size: cover !important;
  background-position: center center !important; /* 让图片始终居中，不会偏移 */
  background-attachment: fixed !important; /* 滚动页面时背景固定不动 */
  background-repeat: no-repeat !important; /* 防止图片重复平铺 */
}

第三步：检查主题容器的背景 #

很多WordPress主题会给页面容器（比如.site-container、.wrapper或者.page-content这类类名）设置白色背景，直接把Body的背景给盖住了。你可以给这些容器设置透明背景：

.site-container, .wrapper, .page-content {
  background-color: transparent !important;
}

如果不确定容器的类名，按F12打开浏览器开发者工具，用选择器工具点击页面内容区域，就能找到对应的类名了。

为什么会出现「先全屏后缩回去」的情况？ #

这是因为页面加载时，你的自定义CSS先生效了，但主题的样式文件加载完成后，用更高优先级的规则覆盖了你的设置——要么是主题给Body/HTML设置了高度限制，要么是容器的背景把你的背景挡住了。上面的步骤就是从根源上解决这些冲突~

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