'Background Image Stretching Beyond Gradient

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;

#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;
}
<div id="my-thing"></div>

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.

New snippet with an image from: https://stackoverflow.com/a/19209651/125981

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;
}
<div id="my-thing"></div>
htmlcssresponsive-designbackground-imagelinear-gradients


Solution 1:[1]

Try background-size: cover; Just one thing though. You are using repeat-x so are you sure the image is larger than it should be or is it simply repeating horizontally?

Solution 2:[2]

Try

#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: no-repeat;
   background-size: cover;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Cutey from Cute Code
Solution 2 David Taiaroa

Related Questions