title: How do I change the color of the background of a clipped path
body: <p>I want to wrap my div with a clipped path in navy.</p>
  
  <p>Here is my HTML and CSS</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>.clipboard {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: url(https://assets.nationbuilder.com/wave/pages/9/attachments/original/1552266959/blueGradientBG.jpeg);
    background-size: cover;
    background-position: center center;
  }
  
  .topArea {
    clip-path: polygon(0px 0px, 900px 0px, 900px 600px, 450px 750px, 0px 600px);
    width: 900px;
    margin: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
  }
  
  .navywrapper {
    width: 900px;
    height: 100%;
    margin: auto;
    background-color: navy
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="navywrapper"&gt;
    &lt;div class="clipboard topArea"&gt;
      &lt;img src="https://via.placeholder.com/300x85" class="eventImgInfo"&gt;
      &lt;img src="https://via.placeholder.com/300x85" class="eventImgInfo"&gt;
      &lt;img src="https://via.placeholder.com/300x85" class="eventImgInfo"&gt;
      &lt;img src="https://via.placeholder.com/300x85" class="eventImgInfo"&gt;
      &lt;img src="https://via.placeholder.com/300x85" class="eventImgInfo"&gt;
      &lt;img src="https://via.placeholder.com/300x85" class="eventImgInfo"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is how I want it to look
  <a href="https://i.stack.imgur.com/9iBS8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9iBS8.png" alt="enter image description here"></a></p>