title: Transparent color of solid image?
body: <p>I am trying to have a large header where there is a background photo and then a solid color overtop it with a opacity of like 90%. (so you can barely see the photo).</p>
  
  <p>This is basically what I have:</p>
  
  <pre><code>.bgoverlay {
    background-image: url("https://i.pinimg.com/originals/06/51/e8/0651e8870431f9db3b26b1fd7615cec1.jpg");
  }
  
  .bgimg-1 {
    background-position: center top;
    background-repeat: no-repeat;
    top: 0px;
    background-size: 100%;
    background-color: #053426;
    min-height: 60%;
    opacity: 0.9;
  }
  </code></pre>
  
  <pre><code>&lt;header class="bgimg-1 bgoverlay"&gt;&lt;/header&gt;
  </code></pre>
  
  <p><b>edit</b></p>
  
  <p>Thank you everyone - adding the :before is so far working out nicely. Although, when it comes to responsive, is there a way to change the background size? I tried background-size but it isn't changing.</p>
  
  <p>For example, if I have the min-height at 70% so the whole header takes up 3/4th of the page but then when I shrink it to mobile size the solid background color is revealed below and the photo is small and not large enough to cover the 71% min height.</p>
  
  <p>Thanks</p>
  
  <p><b>edit 2</b></p>
  
  <p>nvm I ended up using an @media screen to just shrink the overall header on mobile and now it looks great. Thank you!</p>