H1 Header on my page needs a background. I don't know how to code it in CSS

Get Help CSS
#1

I am tryng to get the header to look like this for my project

https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-22-developing-websites-locally/modules/wdcp-22-developing-with-css/projects/dasmoto

Capture
Capture1114×304 251 KB

Here is the CSS:
.brushes h2 {
font-family: Helvetica;
font-size: 32px;
font-weight: bold;
color: white;
background-color: mediumspringgreen;
text-align: left;
}
.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;
}
.header h1 {
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
width: 50%;
margin: 0 auto;
}

Here is the HTML code

<!DOCTYPE html>
<html>
     <head>
          <title>Dasmoto's Arts & Crafts</title>
          <link rel="stylesheet" href="./resources2/css/index.css">
     </head>
     <body>
 <div class="header"><h1>Dasmoto's Arts & Crafts</h1></div>
        <div class="brushes">
            <h2>Brushes</h2>
            <img src="resources2/images/brushes.jpeg">
            <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. <strong style="color:blue;">Starting at $3.00/brushe.</strong></p>
        </div>
        <div class="frames">
            <h2>
                Frames
            </h2>
            <img src="resources2/images/frames.jpeg">
            <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.  <strong style="color:blue;">Starting at $2.00/frame.</strong></p>
        </div>
        <div class="paint">
            <h2>
                Paint
            </h2>
            <img src="resources2/images/paint.jpeg">
            <h3>Clean Finnish Paint</h3>
            <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 longevit of any artwork.  <strong style="color:blue;">Starting at $5.00/tube.</strong></p>
        </div>
     </body>
</html>
#2

Hi!
You can use CSS property background-image :wink:

1 Like