Struggling in the Tea Cozy Project

Hi. I’m kind of stuck in the Tea Cozy Project. My problems involve flexbox and moving child elements within parent elements. I’m trying to move the mission statement to center in the background image. Any help would be appreciated. Here is the code:

HTML…

<!DOCTYPE html>
<html>
    <head>
        <title>Tea Cozy</title>
        <link href="./tea-cozy.css" type="text/css" rel="stylesheet">
    </head>

    <body>
        <header class="header">
            <img class="logo" name="logo" 
            src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-tea-cozy-logo.png">
            <ul class="headerList">
                <li class="mission">Mission</li>
                <li class="featuredTea">Featured Tea</li>
                <li class="locations">Locations</li>
            </ul>
        </header>

        <div class="background">
            <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-mission-background.jpg">
            <div class="missionStatement">
                <h2>Our Mission</h2>
                <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
            </div>
        </div>
    </body>
</html>

CSS…

body {
    font-family: Helvetica;
    font-size: 22px;
    color: seashell;
    background-color: rgba(0, 0, 0, 0.9);
    text-align: center;
}

header {
    height: 69px;
    width: 100%;
    border-bottom: 1px solid seashell;
    position: fixed;
    background-color: black;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    align-items: center;
}

.logo {
    display: inline-flex;
    flex-direction: row;
    height: 50px;
}

.headerList {
    text-decoration: underline;
    display: inline-flex;
    list-style-type: none;
    padding-right: 20px;
}

.mission, .featuredTea, .locations {
    display: inline-flex;
    flex-direction: row;
    padding: 10px;
}

.background {
    height: 700px;
    width: 1200px;
    margin: 0 auto;
}

.missionStatement {
    background-color: black;
    position: relative;
    padding-top: 2px;
    padding-bottom: 2px;
}

Thank you.

1 Like

Why not implementing the image as an actual background image in your CSS and work from there? You will have to remove the element from the html though.

.background {
    height: 700px;
    width: 1200px;
    margin: 0 auto;
    background-image: url('https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-mission-background.jpg');
}

For guides on how to style background images in CSS please refer to the official documentation.

3 Likes

Thank you, Jannes.

I was able to correct it, though I didn’t use your suggestion. I was able to use positioning to correct it. Here is what I used. Thank you so much for your time, though. I appreciate it. Below is the code I used.

Sincerely, John

.background {
    height: 700px;
    width: 1200px;
    margin: 0 auto;
    position: relative;
    top: 70px;
    z-index: 1;
}

.missionStatement {
    background-color: black;
    position: absolute;
    top: 300px;
    width: 1200px;
    padding-top: 2px;
    padding-bottom: 2px;
}

Hey John,

That is also a solution :wink: good job. But I would suggest that in the future it is better to make a habit of using background-image in CSS, as that is exactly what it is meant for. Also you will have in my opinion better control over the image using the background-image control attributes.

.hero-image {
  background-image: url("image.jpg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  height: 500px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}
2 Likes