background image not displaying css/html

Question

This is probably a really simple problem that I'm guessing has a very obvious but stupid solution but I am not seeing it. I am trying to get an image to become a tiled background and for some reason the image is not appearing nor am I getting errors. I have checked permissions and set all files and folders to 777. Can someone point out the problem for me thanks.

My CSS file:

body {
    background-image: url("images/main_background.png");
}

My HTML file:

<!DOCTYPE html>
<html>

    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/layout.css">
    </head>

<body>

    <div id="main_container">

    </div>

</body>

</html>

It might be the reason that the image isn't found in the directory/your are providing wrong url/the styleshet isn't found. — Md Ashaduzzaman
– Md Ashaduzzaman, Commented Nov 17, 2013 at 4:44

codingrose · Accepted Answer · 2013-11-17 04:41:28Z

3

Your image is in images folder and css is in css folder.

images/main_background.png means that images folder is inside the css folder, but it is not.

write this:

body {
    background-image: url("../images/main_background.png"); 
}

OR

body {
    background-image: url("/images/main_background.png"); 
}

answered Nov 17, 2013 at 4:41

codingrose

15.7k11 gold badges41 silver badges58 bronze badges

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

2 Comments

Yamaha32088 Over a year ago

Wow that was dumb of me I've been scratching my head for a half hour screwing with this problem. Thanks I would have thought chromes inspector would have given me a file not found error but I wasn't getting one

codingrose Over a year ago

Welcome.. checking console is the best way to understand errors.

Collectives™ on Stack Overflow

background image not displaying css/html

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related