Welcome • User Guide
ToS • Privacy • Canary
Donate • Bugs • License

©2024 Poal.co

595

/s/MeanwhileOnGLP (part of the image is hidden by the scrollbar (pic8.co))

.subbanner {
    display: grid;
    margin: auto;
    position: relative;
    width: 100vw !important;
    height: 10vw;
    background-size: 100% !important;
    background: url(%%banner%%) no-repeat center;
    background-position: top center;
}
  • This is the default template I use for all my banners.

/s/Jewspiracy (image fits but is too small (pic8.co))

.subbanner {
    display: grid;
    margin: 0px;
    margin-left: -0.5vw !important;
    position: relative;
    width: 100vw !important;
    height: 11vw;
    background-size: 96% !important;
    background: url(%%banner%%) no-repeat center;
    background-position: top center;
}
/s/MeanwhileOnGLP ([part of the image is hidden by the scrollbar](https://pic8.co/sh/4VxlMu.png)) ``` .subbanner { display: grid; margin: auto; position: relative; width: 100vw !important; height: 10vw; background-size: 100% !important; background: url(%%banner%%) no-repeat center; background-position: top center; } ``` - This is the default template I use for all my banners. /s/Jewspiracy ([image fits but is too small](https://pic8.co/sh/nxRd4T.png)) ``` .subbanner { display: grid; margin: 0px; margin-left: -0.5vw !important; position: relative; width: 100vw !important; height: 11vw; background-size: 96% !important; background: url(%%banner%%) no-repeat center; background-position: top center; } ```

(post is archived)

You are currently inside a comment thread.
Click here to see all the comments (13).
[–] • 0 pt

Is it possible to ignore the aspect ratio of the image and make the image "fit" to the available space?

[–] • 0 pt

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?

[–] • 0 pt

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.

[–] • 1 pt (edited )

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).

[–] • 1 pt

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.