Tea Cozy Project: why is the background image not displaying?

Good evening:

I’ve been stuck on this (https://www.codecademy.com/paths/web-development/tracks/getting-more-advanced-with-design/modules/layout-with-flexbox/projects/tea-cozy) project because I have not been able to make the background image show like it’s supposed to.

In this link, you’ll find the design specs, where you will see how the “Our Mission” section should look like.

This is what my HTML looks like:

    <!-- MAIN -->
    <main>
        <!-- Mission -->
        <section id="mission">
            <div class="mission-text">
                <h2>Our Mission</h2>
                <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
            </div>
        </section>

and this is the CSS I’ve come up with:

/* MISSION */
main {
    width: 1200px;
    padding: 69px;
    opacity: 0.9;
    margin: auto;
}

#mission {
    background-image: url(/Resources/images/img-mission-background.jpg);
    height: 700px;
    width: auto;
}
.mission-text {
    width: 100%;
    background-color: black;
}

I used the id selector for the section to set the background image, but it does not show up as expected. Could you help me figure out what I’m doing wrong?

Thank you!

Hello @chip8335305528!! Welcome to the forums :grinning:

Based on the code you posted it appears your url is not complete.

If you want to display a picture, you have to give it the full file path, such as this one taken from the HTML lessons.

https://s3.amazonaws.com/codecademy-content/courses/web-101/web101-image_brownbear.jpg