Background image of Tea Cozy

Language Help CSS
1

Hello, I got stuck in the location DIV that cannot show background image.
Please let me know which part I should adjust.

HTML

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The Tea Cozy</title>
  <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
  <!--Header -->
  
 <header class="flex-container">
  <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png">
  
  <nav>
    <span><a href="#mission">Mission</a></span>
    <span><a href="#Featured Tea">Featured Tea</a></span>
    <span><a href="#Location">Location</a></span>
   </nav>
   </header>
   <!-- Mission seciton-->
<div id="mission" class="flex-container">
   <div class="hero">
     <h2>Our Mission</h2>
     <h4>Handpikced, Art Curated, Free Range,Small Batch</h4>
  </div>
  </div>
  <div class="cozy">
<h2>Tea of the Month</h2>
<h3>Wt's steeping in the Tea Cozy?</h3>
<div class="flex-container">
<div class="item">
  <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg?_gl=1*1n32ata*_ga*MjA0Njg4NjU0MC4xNjU1MDcxODMw*_ga_3LRZM6TM9L*MTY3OTg3NDMwMy41MS4xLjE2Nzk4NzUyMTMuNTkuMC4w" alt="Berry">
  <span>Berry</span>
  </div>
  <div class="item">
  <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg?_gl=1*1hbodf5*_ga*MjA0Njg4NjU0MC4xNjU1MDcxODMw*_ga_3LRZM6TM9L*MTY3OTg3NDMwMy41MS4xLjE2Nzk4NzUyMTMuNTkuMC4w" alt="donut">
  <span>donut</span>
  </div>
  <div class="item"><img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg?_gl=1*1hbodf5*_ga*MjA0Njg4NjU0MC4xNjU1MDcxODMw*_ga_3LRZM6TM9L*MTY3OTg3NDMwMy41MS4xLjE2Nzk4NzUyMTMuNTkuMC4w" alt="rum">
  <span>donut</span>
  </div>
 <div class="item"> <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg?_gl=1*nnsded*_ga*MjA0Njg4NjU0MC4xNjU1MDcxODMw*_ga_3LRZM6TM9L*MTY3OTg3NDMwMy41MS4xLjE2Nzk4NzUyMTMuNTkuMC4w" alt="myrtle">
 <span>myrtle</span>
 </div>
  <div class="item"><img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg?_gl=1*nnsded*_ga*MjA0Njg4NjU0MC4xNjU1MDcxODMw*_ga_3LRZM6TM9L*MTY3OTg3NDMwMy41MS4xLjE2Nzk4NzUyMTMuNTkuMC4w" alt="ttea">
  <span>ttea</span>
</div>
</div>
</div>


<!--location -->

<div id="locations">
      <h2>Locations</h2>
      <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>
  </div>



</body>
</html>


CSS

/* Universal Styles */

body {
margin: 0;
font-family: “Helvetica”, sans-serif;
color: seashell;
background-color: black;
font-size: 22px;
opacity:0.9
text-align: center;
}

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

}

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

Header img{
height:50px;
padding-left:10px;
}

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

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

h2,h3,h4{
font-family: “Helvetica”, sans-serif;
color: seashell;
text-align: center;
}

#mission{
justify-content:center;
height:700px;
background-image: url(“https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg”);
padding-top: 70px;
background-position: center;
background-repeat: no-repeat;
}
.hero {
margin: auto;
background-color: black;
width: 100%;
}

.cozy{
margin: auto;
background-color: black;
height:700px;
width:1000px;
margin:auto;
padding-top:70px;
}

.item{
padding:5px;
}

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

.item span {
display: block;
padding: 5px;
font-weight: bold;
text-align: center;

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

#locations {
background-image: url(“https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg”);
height: 500px;
padding-top: 70px;
}

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

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

2

@123000chan4286216895 Hi, just found a few typos, first of all you have an extra closing div before the end of your body tag, then in your css on your body selector for the opacity, there is a semi column missing.
Can you please share the link of the exercise so that I can see how it should look like.

3

And try this for your #mission section :

#mission {
        height: 700px;
        max-width:1100px;
        display: flex;
        background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg");
        background-position: center;
        background-repeat: no-repeat;
        align-content:center;
    }

Also make sure you double check if you’re closing all the curly braces, I noticed that you’re missing a few. Happy coding @123000chan4286216895 !

4

Thank you SOOOO much!
Fixed already.

1 Like
5

@123000chan4286216895 Great ! Always happy to help :slightly_smiling_face:

6

hello,

I have another question.

Why the flex-grow will affect the NAV bar for switch to the right head corner.
I thought the text align is the only thing I needed. Can you please explain a lilttle more to me?

螢幕擷取畫面 2023-03-31 134618
螢幕擷取畫面 2023-03-31 1346181743×111 15.3 KB

螢幕擷取畫面 2023-03-31 134735

nav{
text-align:right;
flex-grow:1;
color: seashell;
}