'Cant add background-image to webpage

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.

htmlcss


Solution 1:[1]

<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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Trishant Pahwa

Related Questions