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

Get Help Make & Deploy a Website
#1

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
#2

You can try something like this:

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

#3

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?

#4

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
#5

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

So that line should be something like:

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

#6

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?

2 Likes
#7

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
#8

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

#9

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:

1 Like
#10

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.

#11

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

#12

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

#13

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.