Are you wanting the background image to always be fully visible vertically, but horizontally it would scale and stretch to fill the element up to but not behind the scrollbar?
Yes. Can I do background-size: cover 100% !important;?
I can't test right now I just got IP banned on my wifi. Too many refreshes too fast testing out CSS. I don't wanna push it on my mobile IP until AOU unblocks my home IP.
Hey. One thing I just tested on GPL that also looked ok for me on desktop:
- leaving your height at
10vh - changing background-size to
background-size: 100% 20vh !important; - changing your margin to
margin: 0 8px 0 0 !important;
This allows the image to:
- be 100% width and go behind the scrollbar
- the margin of 8 pixels on the right shifts the background to the left 8px so the scrollbar doesn't overlap it
- the height stretched vertically to fill the 10vh size of the banner element
Didn't check on mobile to see how it looks (might need some margin adjustment to match scrollbar width).
Poal bogged down and wasn't loading for me for when I sent that last message. Might not actually be banned if you check again. Maybe it just has a hiccup.
You can also inspect element on the background image in your browser and then change settings in there to test out without actually refreshing your page. This way your testing is only for you locally and not anyone who is viewing the sub. If something displays wonky, only you'll see it then and can see what works or not locally.
That property doesn't offer 'cover' and 'contain' at the same time to control width and height on a single image. If you did cover, contain that would be if you had two background images where one would be set over the other, the back one would be cover and the front one would be contain.
I just tried this out with adjusting the height up a touch to fit the image with its maintained aspect and switching to contain versus cover:
height: 12.8vw !important;
background-size: contain !important;
GLP page looks good with these settings for me, just a slightly taller banner than you might have wanted. jewspiracy looks good for me as you currently have it, image fully visible vertically and horizontally it isn't behind the scrollbar.
It has been quite a few years since I did things with background stretching for elements, so I'm really struggling to pull that method out of the memory crannies.
Think I need a refresher on it so I'm looking at some background tips and things on here and elsewhere: https://www.w3schools.com/cssref/css3_pr_background-size.php
I'll see if I can get something better if this doesn't work to your liking for now.
I'll see if I can get something better if this doesn't work to your liking for now.
No everything is good. I can play with some of the settings you mentioned. Most of the banners work fine with the initial fix you gave me.
Hey I just found something that works everytime (so far) on mobile and desktop. All you have to do is adjust the height to what looks best. The image stretches in both directions, ignoring aspect, and fills the available space. And isn't hidden by the scroll bars.
If you check out /s/AICreations you can see that the image is stretched way out of aspect, but it still looks ok.
.subbanner {
display: grid;
margin: auto;
position: relative;
height: 12vw;
background-size: 100% 100% !important;
background: url(%%banner%%) no-repeat center;
background-position: top center;
}
.subbannerm {
display: grid;
margin: auto;
position: relative;
height: 12vw;
background-size: 100% 100% !important;
background: url(%%banner%%) no-repeat center;
background-position: top center;
}
Nice. The scroll bar doesn't overlap the background image with that even with the margin at auto?
(post is archived)