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
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.