CSS background-image

My background image for my h1 header isn’t appearing on my web page. I have my project folder (Dasmoto), inside that I have my index.html file and a resources folder, inside my resources folder I have an images folder and a CSS folder, inside my images folder I have 4 images (the one in the code below is Image 1), and inside my CSS folder I have CSS.index. Can someone take a look at explain why it’s not appearing?

CSS CODE:

h1 {
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
background-image: url(“resources\images\Image 1.jpeg”);
}

Two things: What is the relative path from inside the CSS folder to the images folder? That’s the URL to use. The other is the whitespace in the file name. We learn early to not have spaces in our file names. It may work on one machine and not on another and should never be trusted.

I guess we could say three things, since there is one more to discuss, namely, the uppercase I in the file name. Also a thing we learn early–to never use capital letters in resource names. Again, it may work, sure, but it’s only asking for typo errors.

Bottom line: No spaces, no capital letters and we can expect way fewer problems down the road.

if as you mention, the CSS folder is in the RESOURCES folder, then the URL to the image file would look something like this:

background-image: url(../images/image1.jpg);
2 Likes

@mtf That worked! Thank you very much. I changed the image names to have no uppercase letters and no spaces, and then used your URL. Though, I tried using a relative path just like that prior, so I suspect it had something to do with the whitespace or capital letters.

Thanks, again :slight_smile:

RyNo

1 Like