title: How can I get a semi-opaque css background overlay to display in landscape?
body: <p>My overlay, a semi-transparent background on top of my background, doesn't display properly when you rotate a screen from portrait to landscape. </p>
  
  <p>Not sure how to fix this. </p>
  
  <pre><code>$primary-color: #313030;
  $secondary-color: #d4fe01;
  $show-home-image: true;
  $home-image: url(../img/background.jpg);
  $background-opacity: 0.8;
  
  @mixin easeOut {
    transition: all 0.5s ease-out;
  }
  
  // hmm
  
  @mixin background {
    @if $show-home-image {
      &amp;#bg-img {
        background: $home-image;
        background-attachment: fixed;
        background-size: cover;
  
        &amp;:after {
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          width: 100%;
          height: 100%;
          z-index: -1;
          background: rgba($primary-color, $background-opacity);
        }
      }
    }
  }
  </code></pre>
  
  <p><a href="https://github.com/shimanopower/newPortfolio/blob/master/dist/img/projects/LearnTerminalAssets/Screen%20Shot%202019-07-06%20at%206.56.30%20PM.png" rel="nofollow noreferrer">https://github.com/shimanopower/newPortfolio/blob/master/dist/img/projects/LearnTerminalAssets/Screen%20Shot%202019-07-06%20at%206.56.30%20PM.png</a></p>
  
  <p><a href="https://github.com/shimanopower/newPortfolio/blob/master/dist/img/projects/LearnTerminalAssets/audreysmonsters.com_(iPhone%20X)%20(1).png" rel="nofollow noreferrer">https://github.com/shimanopower/newPortfolio/blob/master/dist/img/projects/LearnTerminalAssets/audreysmonsters.com_(iPhone%20X)%20(1).png</a></p>
  
  <p>the site w the overlay: <a href="https://audreysmonsters.com" rel="nofollow noreferrer">https://audreysmonsters.com</a></p>