Need help with the Dasmoto's Arts & Crafts projec t

hi guys,

so i just started at codecademy, and i’ve been doing the Dasmoto web page project. Im practically done but im having a problem getting the background image to show up in the h1 header.

here is the html that i have in for the header:

<h1 style="background-image: images\pattern.jpeg">Dasmoto's Arts & Crafts</h1>

what am i doing wrong? THE FRUSTRATION IS REAL

1 Like

I’m pretty sure your link doesn’t work.

*I don’t have pro, so I can’t see project for myself, nor do I have the rest of your code.

This one:

4 Likes
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Dasmoto's Arts & Crafts</title>
    <link rel="stylesheet" href="./resorces/index.css">
</head>
<body>
    <h1 style="background-image: images\pattern.jpeg">Dasmoto's Arts & Crafts</h1>
    <br>
    <br>
    <h2 style="background-color: mediumspringgreen">Brushes</h2>
    <br>
    <img src="images\hacksaw.jpeg" alt="Hacksaw Brushes" class="bold">
    <h3 style="font-family: helvetica">Hacksaw Brushes</h3>
        <p style="font-family: helvetica">Made of the highest oak, Hacksaw brushes are know for 
            their weight and ability to hold paint in large amounts. 
            Available in different sizez. 
            <span style="color:blue; font-weight:bold; font-family:helvetica;">
                Starting at $3.00/ brush</span></p>
    <br>
    <br>
    <h2 style="background-color: lightcoral">Frames</h2>
    <br>
    <img src="images\frames.jpeg" alt="Frames" class="bold">
    <h3 style="font-family: helvetica">Art Frames (assorted)</h3>
        <p style="font-family: helvetica">Assorted frames made of different material, 
            including MDF, birchwood, and PDE. Select frames can be sanded and painted 
            according to your needs. 
            <span style="color:blue; font-weight:bold; font-family:helvetica;">
                Starting at $2.00 / frame.</span></p>
    <br>
    <br>
    <h2 style="background-color: skyblue">Paint</h2>
    <br>
    <img src="images\finnish.jpeg" alt="finnish" class="bold">
    <h3 style="font-family: helvetica">Clean Finnish Paint</h3>
        <p style="font-family: helvetica">Imported paint from Finland. Over 256 colors 
            available in-store, varying in quantity (1 oz. to 8 oz.).
            <span style="color:blue; font-weight:bold; font-family:helvetica;">
                Starting at $5.00 / tube.</span></p>
</body>
</html>
4 Likes

Thanks for the code! New response in one second!

1 Like

From two different code editors and Codecademy’s one for HTML, NONE of the pictures are loading for me.

4 Likes

thats probubly because the sorce of all the pics are local. would it be better if i used a link instead

5 Likes

Yes, you got it :slightly_smiling_face:! I was hoping you’d come to that conclusion after I saw your code, and though. Then everything should work for you.

4 Likes

sweet thanks @trevorhodges your da best :blush:

5 Likes

Your welcome :grinning:. Oh yes, mark your answer correct to know its solved please!

This one.

3 Likes

Sorry for not clarifying:

You just keep it marked! Also, welcome to Codecademy!

3 Likes

its cool…so just to make sure …is this what the code should look like

    <h1 background-img src='https://cdn.discordapp.com/attachments/601438629189124129/610206342954876974/pattern.jpeg' ></h1>>Dasmoto's Arts & Crafts</h1>


or shoud i change src to url

2 Likes

The picture I view finally!

1 Like

Hello. I too need help with Dasmoto’s Arts & Crafts project. Here is a screenshot with what my project ended up looking like.

As you can see from the link, this is not what the final product is supposed to look like.

And this is even after I received both the HTMl & CSS code solution, so I will cut & paste both. I did this using Visual Studio Code.

<head>

<title>Dasmoto's Arts & Crafts</title>

<link href="./resources/css/style.css" type="text/css" rel="stylesheet">

</head>

Dasmoto's Arts & Crafts

Brushes

<img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/hacksaw.jpeg"/>

Hacksaw Brushes

<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="price">Starting at $3.00 / brush.</span></p>

Frames

<img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/frames.jpeg"/>

Art Frames (assorted)

Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs. Starting at $2.00 / frame.

Paint

<img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/finnish.jpeg"/>

Clean Finnish Paint

<p>Imported paint from Finland. Over 256 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. <span class="price">Starting at $5.00 / tube.</span>



</div>

h1,

h2,

h3,

p {

font-family: “Helvetica”, sans-serif;

}

h1 {

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

text-align: center;

font-size: 100px;

color: khaki;

}

.item h2 {

font-size: 32px;

color: white;

}

.price {

font-weight: bold;

color: blue;

}

You need to apply the background color to each heading tag.
For example:

index.html
<h2 class="brushes">Brushes</h2>
style.css
.brushes {
  background-color: mediumspringgreen;
}

You can use id attribute instead of the class attribute.

Hello there. I did as you instructed, the results are still the same. Here is code:

<head>

<title>Dasmoto's Arts & Crafts</title>

<link href="./resources/css/style.css" type="text/css" rel="stylesheet">

</head>

Dasmoto's Arts & Crafts

<h2 id="brushes">Brushes</h2>

<img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/hacksaw.jpeg"/>

Hacksaw Brushes

<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="price">Starting at $3.00 / brush.</span></p>

Frames

<img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/frames.jpeg"/>

Art Frames (assorted)

Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs. Starting at $2.00 / frame.

Paint

<img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/finnish.jpeg"/>

Clean Finnish Paint

<p>Imported paint from Finland. Over 256 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. <span class="price">Starting at $5.00 / tube.</span>



</div>

h1,

h2,

h3,

p {

font-family: “Helvetica”, sans-serif;

}

h1 {

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

text-align: center;

font-size: 100px;

color: khaki;

}

.brushes h2 {

font-family: Helvetica;

font-size: 32px;

font-weight: bold;

color: white;

background-color: mediumspringgreen;

}

.frames h2 {

font-family:Helvetica;

font-size: 32px;

font-weight: bold;

color:white;

background-color: lightcoral;

}

.paint h2{

font-family:Helvetica;

font-size: 32px;

font-weight: bold;

color:white;

background-color: skyblue;

}

In the html file you declared the id attribute in the <h2> tag. In the CSS file you must use “#” instead of “.”

If you declare this in the html file:

index.html
<h2 id="brushes">Brushes</h2>

You must declare this in the css file:

style.css
#brushes {
  font-family: Helvetica;
  font-size: 32px;
  font-weight: bold;
  color: white;
  background-color: mediumspringgreen;
}

The term “.brushes” can only be used if the attribute is declared in the tag as “class = brushes”.

Chaining Selector:

h2.brushes {
  ...
}

Or Nested Elements

.brushes h2 {
  ...
}

From what I researched, these operations of chaining selector and nested elements only work with “class” attribute.
I hope I helped with your question.

I had the same problem. The other pictures from my local file system loaded except for header background image. It worked when I used the web link, but I still don’t know why it wouldn’t use the file saved in my local directory… it was saved in the same folder as the other files, only the filename had changed in the path.

1 Like

Yeah I don’t understand that either.

Hello there. Sorry for late reply. I tried your method to add # instead of . in front of the id’s, & unfortunately it didn’t work.

Hello there. Sorry for late reply. I did use a link to get the background image. Still no background image. So I am stuck as well.