Background image not being applied

Hi there. I have a problem that my background image is not being applied from my styles.css file which contains the following lines:

header, footer, article, nav, .siteAds {
padding: 20px;
background-image: url("images/darknoise.png");

}

It is clear that the rest of the styles within the styles.css file are being applied, its just the image that is not and the page appears like:

However, if I put the style in the <head> section of my index.htm like so:

`<style>
    header, footer, article, nav, .siteAds {
    padding: 20px;
    background-image: url("images/darknoise.png");
}
</style>`

the image appears fine like this:
https://web-devs.000webhostapp.com/

I have the same problem with another site which is using the same background:

https://stuartcodes.000webhostapp.com/

I must be doing something fundementally wrong but I have it working over on this site fine:

https://fishbite.github.io/draw/

in which the style is written like this

background-image: url("../images/darknoise.png");

and I have tried that on 000webhost but that deoesnā€™t work either :frowning:

Using any methods I have tried in my css file result in firefox inspector reporting ā€œCould not load the imageā€ unless I use an absolute file path like

https://stuartcodes.000webhostapp.com/Images/darknoise.png

which I do not want to use. The problem then is with the relative path.

Can anyone please tell what I am missing here. Any help would be so appreciated.

Thanks in advance and kind regards.

Answering my own question. I was going to delete the question, but I thought better of it.

The answer to the problem of missing images is ALWAYS in the path!

I didnā€™t see what the problem was until I opened the .png directly from the file manager and copied the URL and pasted it into a text file:

https://stuartcodes.000webhostapp.com/Images/darknoise.png

and then copied the broken URL from the browser developer tools and pasted that directly underneath the working URL:

https://stuartcodes.000webhostapp.com/Images/darknoise.png
https://stuartcodes.000webhostapp.com/images/darknoise.png

Doh! I had accidentally named my images directory with a capital ā€˜Iā€™ Doh! Doh! Doh!

Once I renamed the directory my:

background-image: url("../images/darknoise.png");

worked as one would expect.

I sincerely hopes this helps someone in the future and provides a little chuckle to everyone thinking of me taking 5hrs to resolve this issue :slight_smile:

1 Like