How do I add a background image in CSS?-CodePudding

I have been trying to add my background image in CSS but nothing is working for me. I tried a few YouTube videos but nothing. Can anyone help me please? I have a folder called "Image" inside of my main folder called "CSS_animation" just for context.

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");

  }

CodePudding user response：

I am not sure but check url maybe it is "./image/FreshFarmsBG.jpg" (with small i) or maybe just try to add this in css

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

CodePudding user response：

Firstly test it within the HTML file with a <style> tag within the <head> tag and insert your CSS inside the style tag...

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

If this works then the link you have created to your stylesheet is probably incorrect...