title: Background Image Stretching Beyond Gradient
body: <p>I'm having an issue with my background image stretching beyond the screen resolution, but it seems to only happen on mobile landscape mode. Here is my css code;</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>#my-thing {
    height: 100%;
    background-color: rgb(10, 0, 0);
    background-image: linear-gradient(rgba(100, 15, 15, 0.5) 5%, rgba(10, 0, 0, 1) 80%), url("assets/brickBackground.png");
    background-repeat: repeat-x;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="my-thing"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The idea is that there is an image that is transitioned by a gradient into a solid background color. It works well on desktop and mobile, but not for landscape mode. The gradient fills the screen, but the image stretches beyond that when a scroll-y is introduced. I figure this is because of the image height, but I'm not sure how to do that properly without affecting the gradient or stretching the image normally. Media query? I'm not too sure.
  I'm somewhat new to css so I apologize and do appreciate any help. Thank you.</p>
  <p>New snippet with an image from: <a href="https://stackoverflow.com/a/19209651/125981">https://stackoverflow.com/a/19209651/125981</a></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>body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
  }
  
  #my-thing {
    height: 100%;
    background-color: rgb(10, 0, 0);
    background-image: linear-gradient(rgba(100, 15, 15, 0.5) 5%, rgba(10, 0, 0, 1) 80%), url("https://i.stack.imgur.com/aH5zB.jpg");
    background-repeat: repeat-x;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="my-thing"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>