Background image for Dasmoto's Project

I’m struggling with getting the background image to show under the header "Dasmoto’s Arts & Crafts. I can’t find where the problem is happening. The rest of the document went pretty quick and I think looks alright but I cannot get that image to show under the text.

HTML code

Dasmoto's Arts & Crafts
<body>
    <div><h1>Dasmoto's Arts & Crafts</h1></div>
    <div><h2 id="brushes">Brushes</h2> 
        <img id="hacksaw" src="C:\Codecademy\Online Projects\Pictures\hacksaw.jpeg">
        <h3 id="hacksawbrush">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 
        <span class="hacksaw">starting at $3.00 / brush.</span></p>
    </div><br>

    <div><h2 id="frames">Frames</h2>
    <img id="frames" src="C:\Codecademy\Online Projects\Pictures\frames.jpeg">
        <h3 id="hacksawbrush">Art Frames (assorted)</h3>
        <p>Assorted frames made of diffferent materials, including MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs. 
        <span class="hacksaw">Starting at $2.00 / frame.</span></p>
    </div><br>

    <div><h2 id="paint">Paint</h2>
    <img id="frames" src="C:\Codecademy\Online Projects\Pictures\finnish.jpeg">
        <h3 id="hacksawbrush">Clean Finnish Paint</h3>
        <p>Imported paint from Finland. Over 256 colors available in-store, varying in quantity (1 oz. to 6 oz.). Clean Finnish paint microbinds to canvas increasing 
        the finish and longevity of any artwork. <span class="hacksaw">Starting at $5.00 / tube.</span></p>

    </div>
</body>

CSS code

h1 {
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
background-image: url(“C:\Codecademy\Online Projects\Pictures\pattern.jpeg”);
}
#brushes {
font-family: Helvetica;
font-size: 32px;
font-weight: bold;
color: white;
background-color: mediumspringgreen;
text-align: left;
}
#hacksaw {
width: 300px;
height: 250px;
}
#hacksawbrush {
font-weight: bold
}
.hacksaw {
font-family: Helvetica;
font-weight: bold;
color: blue;
}
#frames { font-family: Helvetica;
font-size: 32px;
font-weight: bold;
color: white;
background-color: lightcoral;
text-align: left;
}
#paint { font-family: Helvetica;
font-size: 32px;
font-weight: bold;
color: white;
background-color: skyblue;
text-align: left;
}

1 Like

Hi!
I think the problem is the wrong link. At least with an external link everything works fine:
background-image: url(https://content.codecademy.com/courses/freelance-1/unit-2/pattern.jpeg);

If you don’t want to use an external link, just try changing all the slash marks \ in your link to reverse slash marks /

I read on the forum in this thread that this might be a problem :wink:

4 Likes

Thank you!

Any idea on why the slashes need to be reversed for the link? The link in the code above was copy/pasted from my directory. Once i reversed them the image populated just fine.

If I understand correctly, this problem occurs with Windows users. :thinking:
On MacOs, my relative path is copied immediately with this slash / and VSCode for some reason accepts exactly this variant :sweat_smile:

1 Like

I was wanting to pull my hair out, thank you for the suggestions it really helped me!

1 Like

LOL! Same here! Thx for the solution!

Encountered the same issue - changing \ to / also helped ^^

Whew, definitely very frustrating. Especially after immediately trying this after viewing the html/css beginning videos. Structuring file path in Visual Code etc. This weird issue should be commented on somewhere early on. Thanks for the fix!

You can also use a relative destination to your index.css file.

for example, instead of

background-image: url(“C:/Codecademy/Online Projects/Pictures/pattern.jpeg”);

try using

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

that double dot means to go up 1 step in the folder. So if your “index.css” file is in something like C:/Codecademy/Online Projects/CSS/index.css , that should work.