title: How to wrap div around FULL picture
body: <p>im working with flexbox atm but the solution doesnt necessarily have to be flexbox related. </p>
  
  <p>these r the code snippets: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    font-family: Helvetica;
    font-size: 22px;
    color: seashell;
    background-color: black;
    opacity: 0.9;
    text-align: center;
  }
  
  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 69px;
    border-bottom: 1px solid seashell;
    position: fixed;
    width: 100%;
  }
  
  img {
   height: 50px;
   padding-left: 10px;
  }
  
  nav span {
    color: seashell;
    padding-right: 30px;
  
  }
  
  a {
    cursor: pointer;
    text-decoration-color: seashell;
  }
  
  .mission {
    background-image: url(../images/img-mission-background.jpg);
    position: relative;
    margin: 0 auto;
    top: 70px;
    width: 1200px;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" dir="ltr"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Tea Cozy | Home&lt;/title&gt;
      &lt;link rel="stylesheet" href="./resources/css/style.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;header&gt;
        &lt;img src="./resources/images/img-tea-cozy-logo.png" alt="our logo"&gt;
        &lt;nav&gt;
          &lt;a href="#"&gt;&lt;span&gt;Mission&lt;/span&gt;&lt;/a&gt;
          &lt;a href="#"&gt;&lt;span&gt;Featured Tea&lt;/span&gt;&lt;/a&gt;
          &lt;a href="#"&gt;&lt;span&gt;Locations&lt;/span&gt;&lt;/a&gt;
        &lt;/nav&gt;
          &lt;/header&gt;
    &lt;!-- main-content --&gt;
          &lt;div class="mission"&gt;
            &lt;div class="mission-banner"&gt;
              &lt;h2&gt;Our Mission&lt;/h2&gt;
              &lt;h4&gt;Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea&lt;/h4&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Im putting a background-img to the <code>.mission</code> div. But it doesnt show the whole picture, it only shows a snipped of it. How do i make the div wrap around the FULL picture? this is what it looks like rn: <a href="https://i.stack.imgur.com/zvAUx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zvAUx.png" alt="enter image description here"></a></p>
  
  <p>i know i could just put the dimensions of the picture to match the height and width of the div but im trying to achieve it some other way. pls explain to me what you did and why and feel free to correct errors (im still learning ^^)</p>