Problem with CSS backgrounds

HTML & CSS
1

I’m having a super annoying problem with my CSS, and yes I’m a beginner so I have no idea what the problem is. I can’t find anything online about it. I’d appreciate any help.
Here is my code:

html{
    background: url("bgplswork.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

I know I can just use an image link, but then the image won’t be as high quality.

The bgplswork.jpg is stored in the same folder as the html and CSS sheet, I don’t see why it’s not working.

2

That code is fine so it must be the path to the image that is wrong or you have a typo in the image name.

The path to the image is relative to the css file so if your css file is in its own folder then your path needs to come out of that folder to find the image.

e.g. url("../bgplswork.jpg")

Assuming that you have a css folder of course.

If the img, the html page and the css file are all in the same level folder and no subfolders then your original code would work (assuming no typos).

That doesn’t make a lot of sense as the quality of the image has nothing to do whether you load it in the background or the foreground. It’s still the same image :slight_smile: However I think you probably meant something else.

3

Hmm, okay I’ll play around with the path.

4

OK. If you get stuck then post a screenshot of your file structure or if the demo is online then post a link to the problem page. :wink:

5

It’s working now! The image was in a separate folder than the css was, I had no idea that would cause problems when I did it. Thanks!

2 Likes
7

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