Background image in CSS

Im most of the way through my initial project in codecademy however I cannot figure out how to make an image a background to the h1 title.

Do i need to have the image in my index.html file or can I just input the image in my css stylesheet? Ive tried both several times and it either renders full size below the title or not at all. Ive looked at many resources that don’t quite explain it well enough for me to understand.

Please help!

I got it to finally render! However the image is still full size… Im so close. Here is my code at this point:
HTML

</head>
<body>
    <div class="image"><img src="resources/pattern.jpeg"></div>
    <div class="title"><h1>Dasmoto's Arts & Crafts</h1></div>

CSS

.image {
position: relative;
}

.title {
position: absolute;
top: 30px;
width: 100%;
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
}

Do I render the image using “top/right/bottom/etc”? What is the command to make the image only as tall as the text?

Hi! It is possible to put the picture directly in the css as a background. I think this is even easier than putting it into html and then trying to adjust it in css :sweat_smile:

<header>
     <h1>Dasmoto's Arts & Crafts</h1>
</header>
header {
    background: url(https://content.codecademy.com/courses/freelance-1/unit-2/pattern.jpeg?_gl=1*s3310j*_ga*MzUxNDQ4OTE1LjE2NDk3NTMxMDc.*_ga_3LRZM6TM9L*MTY1MzE1NDA2OC43NS4wLjE2NTMxNTQwNjkuNTk.) no-repeat center center;
    text-align: center;
}
1 Like

Wow! It worked! I had to use your URL to make it happen, but it worked thank you so much.
Here is the final code
HTML

</head>
<body>
    <header>
        <h1>Dasmoto's Arts & Crafts</h1>
    </header>

CSS

header {
background: url('https://content.codecademy.com/courses/freelance-1/unit-2/pattern.jpeg?_gl=1*s3310j*_ga*MzUxNDQ4OTE1LjE2NDk3NTMxMDc.*_ga_3LRZM6TM9L*MTY1MzE1NDA2OC43NS4wLjE2NTMxNTQwNjkuNTk.');
background-position: top;
background-repeat: no-repeat;
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
}

Now I am wondering why I was able to render images Relatively (locally) in HTML and only able to render the title image via https URL?

Either way, thank you for helping me. I was totally stuck on this! Glad to know the solution was simpler than anticipated.

It was just an example to show that it works. You can also use the relative path to your project files instead of the long codecademy link that I used :wink: