Cant add background-image to webpage-CodePudding

Web developer noob here, only just starting off and kind of just playing around with things, but I've noticed I cannot insert a background-image into my webpage?

It's a tiny amount of code for now so I have inserted my HTML and and container relating to this below:

body {
  font-family: fantasy;
  background-image: url(.\images\bumble);
}

<!DOCTYPE html>
<html lang="en">
<!-- Head Tag -->

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AJMascot/Homepage</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384- 
    1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href=".\style.css">
</head>

<!-- Body Tag-->

<body>

  <h1 style="color:rgb(255, 208, 0)">
    <bold>
      <center>AJ MASCOTS </center>
    </bold>
  </h1>

  <br>

  <h2 style="color:rgb(255, 208, 0)"><a href=".\AboutUs.html">About Us</a></h2>
  <h2 style="color:rgb(255, 208, 0)">Contact Us</h2>
  <h2 style="color:rgb(255, 208, 0)">Gallery</h2>
  <h2 style="color:rgb(255, 208, 0)"><a href=".\HomePage.html">Home</a></h2>

</body>

</html>

I'm also getting a 404 error in my browser as I use Visual Studios Live Server extension; when I run developer options if that has anything to do with the matter?

I can confirm that the file path for the picture is correct and the actual stylesheet link is correct as my font is pulling through onto the page.

CodePudding user response：

<link rel="stylesheet" href="/style.css">

We don’t use relative paths in URLs. Your CSS doesn’t get loaded in the browser, load it properly.

CodePudding user response：

You need to wrap your CSS in a style tag and as a best practice, place it in the <head> tag

   <style>
    body {
    
    font-family: fantasy;
    background-image: url(.\images\bumble) ;
    
    }
  </style>

If you are referencing an external Stylesheet, you don't need to wrap your CSS in a <style> tag, but if you are going to include it in your HTML file, then you will need to either use in-line style or the <style> tag.