0

I have followed every suggestion in this post: CSS Background image not loading

Yet my image is not loading in the background.

This is my css/style.css:

body {
  font-family: 'Lucida Grande', 'Helvetica', sans-serif;
  background-image: url(../assets/corkboard.jpg);
}

I am loading it into my index.html file which is in the root directory of the project:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>notepad</title>
  <link rel="stylesheet" href="css/style.css" type="text/main">
</head>
<body>

  <button type="button" name="button" id="newNoteButton" onclick="newNote()">Add New Note</button>
  <script type="text/javascript" src="js/script.js"></script>
</body>
</html>

And my images are in a folder called assets.

Daniel
  • 14,004
  • 16
  • 96
  • 156

2 Answers2

2

If anyone ever runs into this problem, ensure that in your link tag your type is text/css and not text/main.

Daniel
  • 14,004
  • 16
  • 96
  • 156
0

Seems to be a problem with the ../assets/corkboard.jpg path. I have copied your html and css in a Codepen and replaced the image url with some random image url found in Google image and it works fine.

Émile Bernard
  • 56
  • 7