如何让WordPress背景图不挤压内容并固定显示

要实现全站统一的固定背景图，且不挤压现有内容，可按以下步骤操作：

1. 优化结构与样式（避免修改核心文件丢失） #

不要在page.php中添加内联样式和单独div，改用全局容器或直接给body设置背景，利用CSS定位让背景脱离正常文档流：

方法一：使用独立固定背景层（推荐） #

在主题的header.php（建议用子主题修改，防止主题更新覆盖）的<body>标签开头添加背景容器：

<div class="site-background"></div>

然后在主题的style.css（或「外观→自定义→附加CSS」中）添加以下样式：

.site-background {
    /* 固定在视口右侧，滚动页面不移动 */
    position: fixed;
    top: 0;
    right: 0;
    /* 占满视口高度，宽度随图片自适应 */
    height: 100vh;
    width: auto;
    /* 背景图基础设置 */
    background-image: url("/wp-content/uploads/2022/10/rose-fade-vertical.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-size: auto 100%;
    /* 把背景层放到内容下方 */
    z-index: -1;
    /* 避免背景层干扰内容的点击交互 */
    pointer-events: none;
}

方法二：直接给body设置背景 #

如果不需要额外容器，也可以直接给body添加样式：

body {
    background-image: url("/wp-content/uploads/2022/10/rose-fade-vertical.png");
    background-repeat: no-repeat;
    background-position: right top;
    /* 固定背景，滚动时不跟随页面移动 */
    background-attachment: fixed;
    /* 让背景高度匹配视口 */
    background-size: auto 100vh;
}

2. 关键属性说明 #

• position: fixed：让背景容器脱离正常文档流，固定在视口位置，不会挤压其他内容。
• z-index: -1：确保背景层位于所有页面内容下方，实现内容叠加效果。
• pointer-events: none：防止背景容器拦截内容的点击、hover等交互事件。
• background-attachment: fixed（方法二）：实现背景图固定不随滚动移动的效果。

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