html css not going well

Question

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");
    }

nitrex · Accepted Answer · 2018-03-04 19:48:02Z

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

answered Mar 4, 2018 at 19:48

nitrex

5526 silver badges16 bronze badges

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

3 Comments

B daddy909 Over a year ago

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.

nitrex Over a year ago

that's great, the "../" tells the browser when it's reading the code to go back one level and then enter in img folder

B daddy909 Over a year ago

ahhh got it... Thanks a lot!

wazz · Accepted Answer · 2018-03-04 19:59:02Z

0

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

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

answered Mar 4, 2018 at 19:59

wazz

5,0885 gold badges22 silver badges36 bronze badges

Collectives™ on Stack Overflow

html css not going well

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related