I’m having an issue setting a background image on my webpage. It is not loading, almost like I forgot a bracket somewhere. The rule is coded at an embedded style sheet, and all other aspects of the style sheet are functioning properly. I have checked the file name and location. I cannot figure out why it is not loading the image. Below is my code, any suggestions are appreciated.
<Style>
Body
{
Background-image: url('../Backgrounds/parchment.gif'); Background-Size: 100% 100%;
}
Try removing the caps letters.
I removed that caps, sadly, it’s still not loading the image. Thanks
Are you sure the path to the image is correct?
You say this is an embedded style, so I would have expected the “Backgrounds” folder to be at the same level as your HTML document. Also check that the directory is really called Backgrounds, not backgrounds.
This is what my HTML folder looks like for this project.
I think we’d need to see the rest of your CSS and the accompanying HTML to see if there’s a conflict somewhere. You seem to have an atypical set-up.
What would a typical set up look like? Mine might look wonky because I’m still learning HTML, and this is how the program I’m taking suggests I set up my folders. But I am open to suggestions for better organization, especially if it will fix this problem.
It’s not usual to have a subfolder for pages.
I guess a typical set up for static html would be something like:-
Backgrounds
about.html
contact.html
index.html
Etc…
Though in some setups there may be a folder per page.
Try looking in Inspect to see if the image loads there.
Okay. Thank you for the feedback. I think I’m going to simplify my organization, and then see if I can more easily locate the image with my code.
I switched out the image, and now it works. It seems I found an image that wasn’t being recognized. Thanks again for the advice about organization.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.