Adding Text Over Background Images CSS

[giga9214454870]

Hello everyone!

I am working on the Tea Cozy project in the Full Stack Engineer Career Path course and I have hit a road block. I am stuck on the step when we use the image file img-mission-background.jpg and in the middle of the image we need to have a h2 element that says Our Mission and right under that element centered we have a h4 element that says Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea. I think I figured out how to get the image loaded correctly as a background image and along with the text to display. But I am having issues lining the h1 element right over the h4 element so there is not two different divides of a black background color over the image. I have attached photos of what my site current looks when deployed along with snippets of my html and CSS
code and the spec sheet of how it is suppose to look. Any help would be appreciated

[mtf]

It would be extremely helpful if you just posted the raw HTML and raw CSS (as text in a post). That screenshot image is rather difficult to navigate.

[giga9214454870]

Raw html

Our Mission

Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea

CSS
.container {
display: flex;
background-image: url(‘…/Images/img-mission-background.jpg’);
height: 700px;
width: 1200px;
flex-wrap: wrap;
flex-direction: column;
}

.mission {

justify-content: center;
text-align: center;
height: 100px;
width: 1200px;

background-color: black;
}

[giga9214454870]

Okay, I posted the raw html and css

[mtf]

We don’t see the HTML.

Aside

It is a good idea to separate your CSS background images from production images (content) used in your pages.

site/css/skins/

This way your background images aren’t mixed with your site content and you don’t have to jump up the directory level.

background: url(skins/mission-background.jpg);

Also, we don’t need quotes on the URL. The browser can read it just fine without them.

[malimar99]

Hi @giga9214454870

I’m a fairly new learner with css too, but I would experiment with flex properties first.
I had a lot of trouble with this too on that stage - no worries !

Seems you’re looking to add

align-content: center;

in your .container class css definition. (and of course set background-color: transparent)

This is what helped me a lot :

A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks

(or just google ‘flex explanation pictures’)

Good luck with your challenges!

[giga9214454870]

Below is the attached HTML code sorry I didn’t realize it took what I posted for the html code and just rendered it. When you say “It is a good idea to separate your CSS background images from production images (content) used in your pages.” When you say this do you mean its best for me to have the image set in my HTML code? I’m a little confused on that explanation. Thanks for mentioning we don’t need quotes for background images!

<div class="container">
        <h2 class="mission">Our Mission</h2>
        <h4 class="mission">
          Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch,
          Fair Trade, Organic Tea</h4>
    </div>r paste code here

[giga9214454870]

I am looking this up now! Thanks for the recommendations