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?

1 Like

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

1 Like

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

So that line should be something like:

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

3 Likes

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?

4 Likes

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.

2 Likes

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

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. :slight_smile:

2 Likes

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.

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

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 DasmotoStructure

Any help would be very much appreciated! Thanks

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.

1 Like

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 :weary:

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

Hello,
I can’t for the life of me get my background image to encompass my heading. Here is my code: h1{
font-family: Arial, Helvetica, sans-serif;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
background-image: url(“/Resources/images/CSS/pattern1.jpeg”);
}

Here is my HTML

Dasmoto's Arts & Crafts

Dasmoto's Arts & Crafts

Hi,

The only way I got this to work for me was to use the solution @java9864960001 provided. (i.e. put the full path name). For me that included the drive name: D:/…/…/…images/pattern.jpeg

It took me ages to work this out!
Good luck.

1 Like

The same thing worked for me. Using the full path name, including the drive name. So my code looked like so in index.HTML:

Dasmoto's Arts and Crafts

Hello there, the following code in index.html worked for me (independent of me writing it or not in index.css)

Dasmoto's Arts and Crafts

After struggling with this nI realised I over complicated it and as my image was saved in my css file i only needed the path:
background-image: url(“pattern.png”);
for it to work.

My finished code:
h1 {
font-family: helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
background-image: url(“pattern.png”);
}