Header background image not showing

HTML & CSS
1

Hi there guys, I’m so sorry to bother with such a simple issue. Basically, I built a simple template trying to utilize a background image. HTML and css validated but I could not get it to display.

After exhausting my Google-Foo, I went and grabbed a simple html/css example from the web so I could just figure out the proper way to display the header.

The background image still doesn’t show.

I’m not sure what I’m doing wrong. I’m sure to others it’s obvious.

Here’s the code: https://schw.im/wix1/index.html

Any help would be greatly appreciated!

2

Hi, your image is actually located here…
https://schw.im/wix1/images/header.png

You need to go up from one directory.

../


background-image: url('../images/header.png');

Looks like you need no-repeat too

background: url('../images/header.png') no-repeat;

3

Thank you so much for your help!

Can I ask if there’s a way to make an css imagepath relative to the html page calling it? I’d like it to work regardless of the directory structure as long as images is sitting in the folder that the html file resides.

4

If you have a folder named images residing in the same folder as your html file the above method would work. That assumes your CSS file is in it’s own folder too within the root folder. I removed my comment about the wix1 folder above. Give it a try.

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.