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

©2024 Poal.co

1.0K

/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).
[–] • 1 pt

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;
}
[–] • 0 pt

Nice. The scroll bar doesn't overlap the background image with that even with the margin at auto?

[–] • 1 pt

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.

[–] • 1 pt

Nice. Glad that is working pretty well then. I made a note of that in case I need to do this with a background image in the future.