htmlcssimagepathcover

Class background defined in .css not showing on webpage. Path to image not recognized. Why?

I made a most basic html and a most basic css. I want to begin by putting a background image. I do not want the style to be defined in the html but in the separate css file.

I did this:
index.html:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>The Ultimate Movies DB</title>

  <meta content="A Movie Database" name="description">
  <meta content="Movie, Database, API" name="keywords">

  <!-- Import own files -->
  <link rel="stylesheet" href="static/css/style.css">

</head>

<body>

<div class="first-div">

</div>

<script src="static/js/script.js"></script>
</body>

</html>

and

style.css:

.first-div {
    background-image: url("../img/home.jpg");
    background-size: cover;
}

but the background image is not showing.

Project structure: projectStructure

This is the message from the browser console:

Failed to load resource: the server responded with a status of 404 (Not Found) home.jpg

the image is not recognized.

I put a relative path to the image from the css file. I tried several combinations of how to write the path but I cannot figure out what goes wrong.

Solution

  • There is a path error in the css file being called in index.html. The correct path will be <link rel="stylesheet" href="../static/css/style.css"/>