Dasmoto's Arts & Crafts Background Image in <h1>

Hi, I am having trouble including the background image in the CSS file for the project “Dasmoto’s Arts & Crafts”.

Here is my code:

h1 {
background-image: url(‘01 Images\01 pattern.jpeg’);
width: 100%;
background-position: center;
background-size: 200%;
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
}

Can I use this relative path?

I already tried a direct path, “image url”, and changing the width, but it doesn’t display the image.

The other images which I included in the html file are working perfectly fine when I use the relative path.

Can somebody help?

You can try something like this:

background-image: url(“https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/pattern.jpeg”);

Thanks, this works for me.

However, I prefer using a relative path just like I use in the html file. Is this possible in the css file as well?

Hm, I found this at stack overflow:

“Partial URLs are interpreted relative to the source of the style sheet, not relative to the document”

So, try maybe to double check your path ‘images\pattern.jpeg’ relative to the .css file and not relative to the .html

edit: you might try ‘.\images\pattern.jpeg’, notice the dot

Actually it’s the darn backslash… You should use slashes ‘/’ instead.

So that line should be something like:

background-image: url("./images/pattern.jpeg");

You are the man! Thanks a lot, this works for me:

background-image: url(“01 images/01 pattern.jpeg”);

no dot needed.

So in general I have to use slashes in css files when using urls? Or how can this be generalized for future projects?

1 Like

I’m glad it worked. I guess it’s always slash, since url’s are always with slash, contrary to the windows command line for example.

1 Like

Ah okay. God to know. Thank you for your fast response. :slight_smile: