如何在屏幕两侧添加图片作为背景并保留原有背景色？

你的代码失效核心原因是：background作为复合属性，会直接覆盖之前单独声明的background-color，导致原有背景色不生效。

要同时实现两侧GIF垂直重复、中间保留指定背景色，只需把背景色整合到多背景的最后一层（背景层是从上到下堆叠的，最后一层作为底层背景），调整后的代码如下：

/* 正确写法：多背景层叠，最后一层为背景色 */
background: url("https://media.giphy.com/media/pKWCBvHevLcMU/giphy.gif") left repeat-y,
            url("explosion.gif") right repeat-y,
            #270436;

额外优化建议：

• 检查本地explosion.gif的路径是否正确，比如文件放在assets文件夹下，路径要写成url("assets/explosion.gif")
• 如果想让GIF高度铺满容器、宽度自适应，可添加background-size控制：

background: url("https://media.giphy.com/media/pKWCBvHevLcMU/giphy.gif") left repeat-y / auto 100%,
            url("explosion.gif") right repeat-y / auto 100%,
            #270436;

• 确保应用该样式的容器（比如body）设置了min-height: 100vh，让GIF能垂直铺满整个页面高度。

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