0

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>
Toryk13
  • 1
  • 2
  • I made a snippet of your code to assist you here in creating a reproducible example right in the question – Mark Schultheiss Feb 28 '22 at 16:55
  • I added a second snippet to show a "stock" image (forced the size so it would show - please update that to match your site since I only guessed on some things in that second example... – Mark Schultheiss Feb 28 '22 at 17:23
  • Apology if this takes too many assumptions but as it stands you question seemed to have more than a few "unknowns" - and probably still does or does not match your site and needs updated... I did this rather than simply vote to close as "Needs details or clarity" here – Mark Schultheiss Feb 28 '22 at 17:25
  • I think the issue only arrises once the content adds a y-scroll. The y-scroll is intended per the function of the site, but the image, will go past the gradient. Should I post the site? Wasn't sure if it was allowed. Thank you. – Toryk13 Feb 28 '22 at 17:32
  • Only post enough of the code to reproduce the issue here; for example we have no idea what your CSS has been applied to, and what sizing that element has, padding, margins, actual image size etc. – Mark Schultheiss Feb 28 '22 at 17:34
  • I've updated the code to match the style that I have. The only thing missing was the height attribute. I do have the style linked to the html element. – Toryk13 Feb 28 '22 at 17:46
  • "I do have the style linked to the html element." What does that mean? do you mean you have `html {}` with that CSS in there? Something else? I put a `div` in the snippet only because I did not know and it probably needs to match yours? – Mark Schultheiss Feb 28 '22 at 18:23

2 Answers2

0

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?

Cutey from Cute Code
  • 1,065
  • 3
  • 13
  • The background-size: cover; did not do the trick. I did want it to repeat only horizontally and cut off vertically. The gradient stops at the display size but not the image. Thank you. – Toryk13 Feb 28 '22 at 17:16
  • OK sorry about that. I've reliased it might if you use `background:` instead of `background-image:` but I think that may spoil your gradient. – Cutey from Cute Code Feb 28 '22 at 17:19
  • That's my dilemma too lol. I want to keep the gradient since it scales. I could just apply the gradient to the background image in photoshop and then it would work regardless. – Toryk13 Feb 28 '22 at 17:27
  • That would be a reasonable fix for sure but I know where you are. Nice to do it properly. I am now wondering if adding a gradient to your image would make it a smaller or larger file size. Could be worth doing it that way if it does also end up saving some load time. – Cutey from Cute Code Feb 28 '22 at 17:31
0

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;
}
David Taiaroa
  • 25,157
  • 7
  • 62
  • 50