Dasmoto Arts & Crafts Project

Hello, I am currently working on the Dasmoto Arts & Crafts project and am having trouble linking an image file on my CSS stylesheet to use as a background image for my h1 heading. I currently have the pattern.jpeg saved in a folder called “images” that is located within a folder called “resources”, which is located within my project folder called “Dasmoto”. (None of the folder names include the quotations, those are just in this post for clarity.) Below is a copy of the HTML and CSS that I have so far:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Dasmoto Arts & Crafts</title>
        <link rel="stylesheet" href="./resources/css/index.css">
    </head>
    <body>
        <header>
            <h1> Dasmoto's Arts & Crafts </h1>
        </header>
    </body>
</html>
h1 {
    font-family: Helvetica;
    font-size: bold;
    font-weight: 100px;
    color: khaki;
    text-align: center;
}

header {
    background-image: url ("/resources/images/pattern.jpeg" );
    background-color: darkgray;
}

With the code as it is written above, my h1 text shows as expected with a dark gray color background, but no matter what I try, I can’t get the image to show up.

Can anyone help me understand how to create a proper path for a background image? Thank you!

Where is your css file? Is that also located in the folder ‘Dasmoto’? Or in a subfolder?

Try changing “/resources/images/pattern.jpeg” to “./resources/images/pattern.jpeg”

. in front of /resources

Yes, my css file called index.css is in a folder called “css” which is in my “resources” folder within the Dasmoto folder. Is it too many folders deep? I was just trying to be organized.

I have tried putting the . in front of /resources but that didn’t seem to change anything when I refreshed the webpage.

Then the path /resources/images/pattern.jpeg starts in your css folder. You need to move out of that folder first. You do that with two dots:

url ("../resources/images/pattern.jpeg" );

Then this relative path starts in your root folder Dasmoto.

1 Like

Ok, this is what I have now per what I understood from your suggestion:

header {
    background-image: url ("../resources/images/pattern.jpeg");
    background-color: darkgray;
}

Then I refreshed the webpage and I am still only seeing my darkgray background color and not the pattern.jpeg image. I must be doing something else wrong because what you said made total sense.

Ok I think I understand your folder structure
try ./images/pattern.jpeg

Have you checked the debugging tool? That tells you where it is searching the file if it fails to do so.
Your current code requires the following file structure:

root folder (Dasmoto → better use lower case for folder names)

|-- index.html
|-- resources
    |-- images
       |-- pattern.jpeg
|-- css
    |-- index.css

I guess I don’t know how to use the debugging tool. There has not been a codecademy exercise related to this. I will change the folder name of Dasmoto to dasmoto though just for consistency.

Try Chrome browser and rightclick on your headline. Then in the context menu ‘inspect’ (or a similar term → mine shows the german terms). Then a side bar should open with your html tree and a console that shows errors in your code.
Can you post a screenshot of your file structure?

So your css folder and the images folder are in the folder resources. So resources is not part of the relative path and you just need to move out of the css folder with the two dots:

"../images/pattern.jpeg"

I tried that, and it still didn’t change anything. Here is a screen shot of the Chrome DevTools with my header section highlighted. You can see where it says background-image that the whole line of code is crossed out. Not sure what to do from here.

See how the line background-image is crossed out in the debugging tool?
Try to remove that space between url and the opening parenthesis.

1 Like

That was it! It finally worked!! Thank you for working me through this because it was unendingly frustrating!

1 Like