Cozy Tea Project

https://www.codecademy.com/paths/web-development/tracks/getting-more-advanced-with-design/modules/layout-with-flexbox/projects/tea-cozy

Hi,

I completed the Cozy-tea project however on a wider screen the background images repeat. When I set the no-repeat rule on the images are no longer centered.

Any help would be great!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tea Cozy</title>
    <link href="./index.css" type="text/css" rel="stylesheet">
</head>
<!--Header-->
<body>
<header class="flex-container">
    <img src="./src/img-tea-cozy-logo.png">
    <nav>
        <span><a>Mission</a></span>
        <span><a>Featured Tea</a></span>
        <span><a>Locations</a></span>
    </nav>
</header>
<!--Main container-->
    <div class="main">
        <!--Mission-->
        <div id="mission" class="flex-container">
            <div class="content">
            <h2>Our Mission</h2>
            <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
            </div>
        </div>
        <!--Tea of the Month-->
        <div class="teaofthemonth">
            <h2>Tea of the Month</h2>
            <h4>What's Steeping at The Tea Cozy</h4> 
        
            <!--Items container-->
            <div class="flex-container items">

                <div class="item">
                <img src="./src/img-berryblitz.jpg">
                    <span>Fall Berry Blitz Tea</span>
                </div>
                <div class="item">
                    <img src="./src/img-spiced-rum.jpg">
                        <span>Spiced Rum Tea</span>
                </div>
                <div class="item">
                    <img src="./src/img-donut.jpg">
                        <span>Seasonal Donuts</span>
                </div>
                <div class="item">
                    <img src="./src/img-myrtle-ave.jpg">
                        <span>Myrtle Ave Tea</span>
                </div>
                <div class="item">
                    <img src="./src/img-bedford-bizarre.jpg">
                        <span>Bedford Bizarre Tea</span>    
                </div>
            </div>
        </div>
        <!--Locations-->
        <div id="locations">
            <h2>Locations</h2>
            <!--location container-->
            <div class="flex-container locations">
                <div class="location">
                    <h3>Downtown</h3>
                    <p>384 West 4th St</p>
                    <p>Suite 108</p>
                    <p>Portland, Maine</p>
                </div>
                <div class="location">
                    <h3>East Bayside</h3>
                    <p>3433 Phisherman's Avenue</p>
                    <p>NorthWest Corner</p>
                    <p>Portland, Maine</p>
                </div>
                <div class="location">
                    <h3>Oakdale</h3>
                    <p>515 Crescent Avenue</p>
                    <p>Second Floor</p>
                    <p>Portland, Maine</p>
                </div>
            </div>

        </div>
        <!--Contact Section-->
        <div class="contact">
            <h1>The Tea Cozy</h1>
            <h5>contact@theteacozy.com</h5>
            <h5>917-555-8904</h5>
        </div>
    </div>
  <!--footer--> 
  <footer>
    <h5>copyright The Tea Cozy 2017</h5>
  </footer> 
</body>
</html>
html, body {
    font-family: Helvetica;
    font-size: 22px;
    color: seashell;
    background-color: black;
    opacity: 0.9;
    text-align: center;
}

.main {
    margin: 0 25px;
}


.flex-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

a {
    text-decoration: underline;
}

header {
    position: fixed;
    border-bottom: 1px solid seashell;
    height: 69px;
    width: 100%;
    align-items: center;
    background-color: black;
    z-index: 1;
}

nav {
    text-align: right;
    flex-grow: 1;
    display: block;
}

nav span {
    display: inline-block;
    padding: 20px 10px;
}

header img {
    height: 50px;
}

#mission {
    background-image: url(./src/img-mission-background.jpg);
    height: 700px; 
    padding-top: 70px;
}

h2 {
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

h2, h3, h4 {
    margin: 0;
    padding: 10px;
}

#mission .content {
    background-color: black;
    width: 100%;
    margin: auto;
    text-align: center;
}

.teaofthemonth {
    width: 1000px;
    text-align: center;
    height: 700px;
    width: 1000px;
    margin: auto;
    padding-top: 70px;
}

.item img {
    height: 200px;
    margin: 10px;
    display: block;
}

#locations {
    background-image: url(./src/img-locations-background.jpg);
    height: 500px;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.location {
    opacity: 1.0;
    padding: 10px;
    margin: 5px 20px;
    background-color: black;
    flex-basis: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#locations .flex-container {
    margin: auto;
    width: 1100px;
}

.flex-container.locations {
    padding-top: 5px;
}

.contact {
    height: 200px;
}

footer {
    text-align: left;
    padding-left: 20px;
    padding-bottom: 10px;
}

I am by no means an expert, but did you try doing
background-size: cover?

Or changing the background size at all?

I think you could also do…
height: 700px;
width: 100%
or something like that