如何在HTML中使用脚本变量作为body元素的背景图片源？

开发者阿泽

2026-6-25

正确用JS变量设置body背景图的方法

你之前的尝试存在几个关键问题：

CSS无法直接引用JS变量，两者属于不同的执行上下文，不能在url()里直接写JS变量名
第二种尝试的HTML写法错误，<p>标签不能直接写background属性，且脚本变量名（iimage）和之前定义的backimage不匹配，也没设置完整的背景样式

下面是两种可行的解决方案：

方法一：直接通过JS操作body的style属性

这种方法简单直接，适合快速实现需求：

<script>
// 这里替换成你生成image变量的逻辑
var image = "sunset"; // 示例图片名
var backimage = 'images/' + image + '.jpg';

// 等待DOM加载完成后执行，确保body元素已存在
window.onload = function() {
  // 一次性设置完整的背景样式
  document.body.style.background = `url(${backimage}) no-repeat center center fixed`;
  // 设置背景尺寸
  document.body.style.backgroundSize = 'cover';
};
</script>

如果你的变量生成逻辑在DOM加载前就完成，也可以把脚本放在</body>标签前，这样可以省略window.onload。

方法二：使用CSS变量（更灵活）

这种方法适合需要复用样式或后续有更多动态样式修改的场景：

<style>
body {
  background: var(--body-bg) no-repeat center center fixed;
  background-size: cover;
}
</style>

<script>
var image = "sunset";
var backimage = 'images/' + image + '.jpg';

window.onload = function() {
  // 修改根元素的CSS变量，body会自动应用这个值
  document.documentElement.style.setProperty('--body-bg', `url(${backimage})`);
};
</script>