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

Question

我一直在尝试在 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");

  }

Answer 1

首先在 HTML 文件中测试它，在 <head> 标签中使用 <style> 标签，然后在样式标签中插入 CSS...

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

如果这可行，那么您为样式表创建的 link 可能不正确...

Answer 2

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

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

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

How do I add a background image in CSS?

html

css

css-animations