Dasmoto Project help!

Hi guys,

I’ve been trying to get this webpage to run as per the schematic. All seems to be good other than the background image in the h1 element which doesn’t want to display! URL to the project below. I’ve been using Visual Studio Code to write the code and it’s helped me to generate the url in the CSS h1 code which should link to pattern.webp which is in the /resources/images folder in my project directory. I’ve tried a few different versions of the url including the full address and using quotation marks and nothing seems to make it work. I’m viewing the index.html file in Google Chrome.

Does anyone have any ideas?

Thanks

Alex

https://www.codecademy.com/paths/learn-how-to-build-websites/tracks/build-websites-on-your-own-computer/modules/local-website-development/informationals/dasmoto-solution

My HTML Code:

<!DOCTYPE html>
<html>
    <head>
        <link href="./resources/css/style.css" rel="stylesheet" type="text/css">
        <title>Dasmoto's Arts and Crafts</title>
    </head>
    <body>
        <h1>Dasmoto's Arts and Crafts</h1>
        <h2 class="brushes">Brushes</h2>
        <img src="resources/images/hacksaw.webp">
        <h3>Hacksaw Brushes</h3>
        <p>Made of the highest quality oak. Hacksaw brushes are known for their weight and ability to hold paint in large amounts. Available in different sizes.</p><p class="price">Starting at $3.00/brush</p>
        <h2 class="frames">Frames</h2>
        <img src="resources/images/frames.webp">
        <h3>Art Frames (assorted)</h3>
        <p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs. </p><p class="price">Starting at $2.00/frame.</p>
        <h2 class="paint">Paint</h2>
        <img src="resources/images/finnish.webp">
        <h3>Clean Finnish Paint</h3>
        <p>Imported paint from Finland. Over 250 colors available in store, varying in quantity (1 oz. to 8 oz.). Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork. </p><p class="price">Starting at $5.00/tube.</p>
    </body>
</html>

My CSS Code:

body {
    font-family: Helvetica;
}

h1 {
    font-size: 100px;
    font-weight: bold;
    color: khaki;
    background-image: url(/resources/images/pattern.webp);
    text-align: center;
}
h2 {
    font-size: 32px;
    font-weight: bold;
    color: white;
}
.frames {
    background-color: lightcoral;
}

.paint {
    background-color: skyblue
}

.brushes {
    background-color: mediumspringgreen;
}

.price {
    font-weight: bold;
    color: blue;
}

You can consider adding width and height and try to center the background image.

Here’s the example →
https://www.w3schools.com/cssref/pr_background-image.asp

I thought it was just me?! I even used the autofill options that VSC has, so that the relative path was formatted correctly, and I still can’t get the image to appear.