如何在CSS中添加背景图片？按教程设置仍不生效求解决方案

开发者阿泽

2026-9-24

问题排查步骤

确认文件路径匹配
你当前写的url("Image/FreshFarmsBG.jpg")是相对路径，默认从CSS文件所在位置出发查找资源：如果你的style.css直接放在CSS_animation根目录下，和Image文件夹同级，这个路径写法没问题；如果style.css是放在单独的css文件夹中，就需要改成url("../Image/FreshFarmsBG.jpg")，../代表返回上一级目录。
核对文件名大小写
Mac、Linux系统以及线上服务器对文件名大小写敏感，要确认你的资源文件夹确实是首字母大写的Image，图片文件名完全和你写的一致，包括后缀是jpg不是jpeg，没有拼写错误。
补全body高度和背景属性
你当前页面的body只有导航栏内容，高度会随内容收缩，哪怕背景图加载成功也可能看不到。给body加上最小高度占满整个视口，再补全常用的背景配置即可，修正后的CSS参考：

body {
  margin: 0;
  min-height: 100vh;
  background-image: url("Image/FreshFarmsBG.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}