Tea Cozy Project - bg color not appearing over bg image

Hi, I struggled through the positioning content so no surprise I’m still struggling now, I’m trying to complete this project but have found that no matter what I try to amend on the #mission .content selector, nothing seems to appear when I actually run it. I’m trying to get the black background behind my h2 and h4 elements and then center them over the bg image in #mission.

Can anyone tell me what I’m missing here?

HTML:

<!DOCTYPE html>
<html>
    <head>
        <link href="style.css" type="text/css" rel="stylesheet">

    </head>
    <body>
        <header> <img src="images/img-tea-cozy-logo.webp" id="logo">
                <nav><span>Mission</span>
                <span>Featured Tea</span>
                <span>Locations</span></nav>      
        </header>
        <div class="main">
        <div class="container content" id="mission"><h2>Our Mission</h2>       
        <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4></div>

        <!-- Tea of the Month -->
        <div class="tea container">
            <h2>Tea of the Month</h2>
            <h4>What's Steeping at The Tea Cozy?</h4>
            <figure>
                <img src="images/img-berryblitz.webp">
                <figcaption>Fall Berry Blitz Tea</figcaption>
            </figure>
            <figure>
                <img src="images/img-spiced-rum.webp">
                <figcaption>Spiced Rum Tea</figcaption>
            </figure>
            <figure>
                <img src="images/img-donut.webp">
                <figcaption>Seasonal Donuts</figcaption>
            </figure>
            <figure>
                <img src="images/img-donut.webp">
                <figcaption>Myrtle Ave Tea</figcaption>
            </figure>
            <figure>
                <img src="images/img-berryblitz.webp">
                <figcaption>Bedford Bizarre Tea</figcaption>
            </figure>
        </div>
            <!-- Locations -->
        <div class="container">
            <h3>Downtown</h3>
            <h4>384 West 4th St</h4>
            <h4>Suite 108</h4>
            <h4>Portland, Maine</h4>
        </div>
        <div class="container">
            <h3>East Bayside</h3>
            <h4>3433 Phisherman's Avenue</h4>
            <h4>(Northwest Corner)</h4>
            <h4>Portland, Maine</h4>
        </div>
        <div class="container">
            <h3>Oakdale</h3>
            <h4>515 Crescent Avenue</h4>
            <h4>Second Floor</h4>
            <h4>Portland, Maine</h4>
        </div>

        <div class="container">
            <h3>The Tea Cozy</h3>
            <h5>contact@theteacozy.com</h5>
            <h5>917-555-8904</h5>
        </div>
    </div>

    </body>
    <footer>
        <h5>copyright The Tea Cozy 2017</h5>
    </footer>
</html>

CSS:

html {
    font-family: Helvetica, sans-serif;
    font-size: 22px;
    color: seashell;
    background-color: black;
}

header {
    height: 70px;
    border: 1px solid seashell;
    text-decoration: underline;
    background-color: black;
    position: fixed;
    width: 100%;
    display: inline-flex;
    margin: 0;
    top: 0px;
    right: 0px;
    z-index: 1;
}

header #logo {
    height: 50px;
    opacity: 0.9;
    margin: 10px;
}

nav {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 10px;
}

nav span {
    margin-left: 10px;
}

.main {
    margin: auto;
}

.container {
    text-align: center;
    justify-content: center;
}

#mission {
    margin-top: 80px;
    background-image: url(images/img-mission-background.webp);
    height: 700px;
    width: 1200px;
    margin: 69px auto;
    overflow: auto;
}

#mission .content {
    display: flex;
    background-color: black;
    justify-content: center;
}

Which <h2> and <h4> elements do you want to position on a black background? ‘Our mission’ and ‘Handpicked, …’?
Then your selector must be #mission.container, because the id and the class are on the same element.
The other <h2> and <h4> elements are outside of the #mission container. You already closed the <div class="container content" id="mission"> before the <div class="tea container">.

1 Like

In case it helps people in the future, I eventually found the solution:

I needed to create a div within the mission div to hold the black background. As it was I was telling #mission to have both a picture and black as the background so it was only showing me the image. I needed a separate div for just the text. :grinning:

<div id="mission">
    <div class="missiontxt"><h2>Our Mission</h2>       
        <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
    </div>
</div>