0

Am I typing something in wrong for the background image not to be working? All the folders and files are in the correct spot for it to work.

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <title>First Project</title>
      <link rel="stylesheet" href="css.folder/first_project.css">
    </head>
    <body>
      <h1>marvelous day</h1>
    </body>
</html>

h1 {
    color: blue;
}

body {
    background-image: url("img/pattern.png");
    }
0

2 Answers 2

1

I suppose your folder structure is the following

  • css
    • first_project.css
  • img
    • pattern.png
  • index.html

if this is the case in your css you should add ../ before your url so that the browser can know where the image is located

body{
    background-image:url("../img/pattern.png");
}

pay attention for relative urls in your css

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

3 Comments

Worked! Thanks a lot. Going to sound like a noob but what exactly does the ".." mean at the beginning of that url? I was taught a whole different way.
that's great, the "../" tells the browser when it's reading the code to go back one level and then enter in img folder
ahhh got it... Thanks a lot!
0

You can add a slash at the beginning so it starts looking from the root:

background-image: url("/img/pattern.png");

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.