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?
The scroll bar doesn't overlap the background image with that even with the margin at auto?
No. Both auto and 0px seem to work fine. I tested by setting margin-right to 8px and sure enough there is an 8px black bar next to the scroll bar.
(post is archived)