如何在 CSS 中添加背景图片？答案

【问题标题】：How do I add a background image in CSS?如何在 CSS 中添加背景图片？
【发布时间】：2022-01-09 04:03:08
【问题描述】：

我一直在尝试在 CSS 中添加我的背景图片，但没有任何效果。我尝试了一些 YouTube 视频，但没有。任何人都可以帮助我吗？我在名为“CSS_animation”的主文件夹中有一个名为“Image”的文件夹，仅用于上下文。

HTML

  <!doctype html>
  <html>
  <head>
  <meta charset="utf-8">
  <link href="style.css" rel="stylesheet" type="text/css"/>
  <title>CSS Animation</title>
  </head>

  <body>
  <main>

  <nav>
  <ul>
  <li class="one"><a href="#">Menu 1</a></li>
  <li class="two"><a href="#">Menu 2</a></li>
  <li class="three"><a href="#">Menu 3</a></li>
    </ul>
  </nav>
  </main>
  </body>
  </html>

CSS

  body
  {
  background-image: url("Image/FreshFarmsBG.jpg");

  }

【问题讨论】：

您检查过您的开发工具是否有错误？
我正在使用 codepen.io，我检查了我的控制台，没有任何问题，但是当我继续使用 dreamweaver 并尝试在 google chrome 中查看它时，页面将无法加载。它显示一条错误消息“保存所有文件（包括相关文件）以进行预览。”但我把所有东西都保存了？我迷路了。
你能分享你完整的文件树结构吗？
我刚刚检查过，现在图像已上传。它通过html中的样式工作。那么我猜我的css没有连接到我的html？
这能回答你的问题吗？ best way to implement background image on HTML or body

标签： html css css-animations

【解决方案1】：

我不确定，但检查 url 可能是“./image/FreshFarmsBG.jpg”（带有小 i）或者只是尝试在 css 中添加它

background-repeat: no-repeat;
background-size: cover;

【讨论】：

这修复了它！谢谢！

【解决方案2】：

首先在 HTML 文件中使用<head> 标记中的<style> 标记对其进行测试，然后将 CSS 插入样式标记中...

<head>
      <style>
        body {
             background-image: url("desiredPathHere");
        }
      </style>
</head>

如果可行，那么您创建的样式表链接可能不正确...

【讨论】：

你确定你的文件路径是正确的吗？
是的，我有。现在已经修好了，谢谢！