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

[fl0rean]

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?

[mormin]

You can try something like this:

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

[fl0rean]

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?

[mormin]

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

[mormin]

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

So that line should be something like:

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

[fl0rean]

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?

[mormin]

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.

URL | Syntax

[fl0rean]

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

[dakaloramokgopa13806]

Yeah, I had the same problem.
I found out that the relative path that I was using is didn’t account for where the CSS file is. So i had to go up two directories “…/…/” then set the path for the image. Like this:
“…/…/resources/images/Image1.jpeg”
After that it worked.

[smax88]

That is the solution that worked for me. Until this point I didn’t know how to go up in directories in a relative path.

[gerardo72k]

For some reason mine worked with background-image: url("…/…/resource/pattern.jpeg");

[digital6577188980]

Hi, I’m also having trouble with inserting a background image in using a relative path, and I feel I’ve tried every possible permutation! My best attempt code is:

.header {
text-align: center;
background-image: url("…/…/resources/images/image1.jpeg");
font-size: 100px;
font-weight: bold;
}

based on the comments above. For reference, my file structure is

Any help would be very much appreciated! Thanks

[java9864960001]

I was having the same problem and what solved my case was writing the complete image address:
header {
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
background-image: url("/home/leandro/projects/Dasmoto’s_Arts_&_Crafts/resources/images/pattern.webp");
}

even if a top folder, like ‘/home/’, is removed the background image wouldn’t display anymore.

[dev6986774138]

Hey everybody! I am looking for some help adding a background-image to an h1 element in the Web Development Foundations, Developing Websites Locally unit. Specifically the Dasmoto’s Arts & Crafts project. I have tried every version of the relative path I can think of.
I originally started with background-image: url(“images/pattern.jpeg”);
then tried background-image: url(“resources/images/pattern.jpeg”);
then tried background-image: url(“dasmoto/resources/images/pattern.jpeg”);
then tried background-image: url(“projects/dasmoto/resources/images/pattern.jpeg”);
then tried background-image: url(“codeacademy/projects/dasmoto/resources/images/pattern.jpeg”);
then tried background-image: url(“documents/codeacademy/projects/dasmoto/resources/images/pattern.jpeg”);
lastly, I tried then tried background-image: url(“…/…/resources/images/pattern.jpeg”);

I have no idea what I am missing

This is the error message I get in DevTools after copying and pasting the relative path link from VS Code

I also get this error message when adding a standalone image in my HTML document for the hacksaw.jpeg