Dasmoto Arts and Crafts Project

I am new to doing HTML and thought i was getting the hang of it but i cannot figure out how to get the words over top of the image. I have reviewed others projects but they never added the wall, so im confused and stuck. Can someone please advise where im going wrong.

Dasmoto's Arts & Crarts

Dasmoto's Arts & Crafts

<h1 class="brushes">Brushes</h1>
<img src="https://content.codecademy.com/courses/freelance-1/unit-2/hacksaw.jpeg?_gl=1*m1wtv0*_ga*OTAzMTQ5OTY2LjE3MDg3NDk2NzU.*_ga_3LRZM6TM9L*MTcxMjAxNzY4NS4zMy4xLjE3MTIwMTc2OTQuNTEuMC4w" alt="brushes layinh sideways">
<p>Made of the highes qulity oak, Hacksaw Brushes are known for their weight and ability to hold paint in large amounts. Available in different sizes. <strong>Starting at $3.00 / brush.</strong></p>

<h1 class="frames">Frames</h1>
<img src="https://content.codecademy.com/courses/freelance-1/unit-2/frames.jpeg?_gl=1*c02jg6*_ga*OTAzMTQ5OTY2LjE3MDg3NDk2NzU.*_ga_3LRZM6TM9L*MTcxMjAxNzY4NS4zMy4xLjE3MTIwMTc2OTQuNTEuMC4w" alt="frames of different sizes">
<p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted accordin to your needs. <strong>Starting at $2.00 / frame.</strong></p>

<h1 class="paint">Paint</h1>
<img src="https://content.codecademy.com/courses/freelance-1/unit-2/finnish.jpeg?_gl=1*11h3fdk*_ga*OTAzMTQ5OTY2LjE3MDg3NDk2NzU.*_ga_3LRZM6TM9L*MTcxMjAxNzY4NS4zMy4xLjE3MTIwMTc2OTQuNTEuMC4w" alt="shows ends of paint tubes">
<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 finsh and the longevity of any artwork. <strong>Starting at $5.00 / tube.</strong></p>

.banner{
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
position: center;
}

.wall{
height: 125px;
width: 1335px;

}

strong {
font-family: Helvetica;
font-weight: bold;
color: royalblue;
}

h1 {
font-family: Helvetica;
font-size: 32px;
font-weight: bold;
color: white;
}

.brushes {
background-color: mediumspringgreen;
}

.frames {
background-color: lightcoral;
}

.paint {
background-color: skyblue;
}

Greetings dude, hope you’re doing well. The effort you’ve been applying it’s great, I’ll give you a hand :raised_hand_with_fingers_splayed:

You can create a division, or a semantic header where is going to be applied the image as a background one, how? Check this out

header {
  background-image: url(/* The URL of the image, whether absolute or relative */);
}

You can polish the image (Its size, position, and repetition) by using the next properties:

header {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; 
}

Then, if everything goes well, then you should have already an image as a background, and all that you’ll need to do is nesting the h1 tag within the header and apply as much style as you prefer, for example:

<header>
  <h1> Here goes the Title 💯 </h1>
</header>

Remember to stylize the title :sweat_smile: using CSS, there are more ways to do these, but this is one that I’ve personally tested out, and has worked very well.

By the way, remember to use only one <h1> element per project, as it will improve your SEO, in the case of the subtitles, you can use <h2>


If you want to see my project as a more-specific reference, you can check it out: Dasmoto Arts and Crafts Project - TheBoxHeadGuy

1 Like

Hey, I was also struggling a bit with this part, so thank you very much for this solution.

1 Like

You’re completely welcome my dear friend! If there’s something else I can help you with, I’ll do it