css background-image:url() not loading the image

Question

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 · Accepted Answer · 2018-11-28 18:46:09Z

2

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

answered Nov 28, 2018 at 18:46

Daniel

15.7k20 gold badges117 silver badges184 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Émile Bernard · Accepted Answer · 2018-11-28 18:48:30Z

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.

answered Nov 28, 2018 at 18:48

Émile Bernard

567 bronze badges

Collectives™ on Stack Overflow

css background-image:url() not loading the image

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related