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

©2024 Poal.co

346

/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

Works perfect on desktop and mobile. Thank you.

.subbanner {
    display: grid;
    margin: 0px;
    position: relative;
    height: 10vw;
    background-size: cover !important;
    background: url(%%banner%%) no-repeat center;
    background-position: top center;
}

.subbannerm {
    display: grid;
    margin: 0px;
    position: relative;
    height: 10vw;
    background-size: cover !important;
    background: url(%%banner%%) no-repeat center;
    background-position: top center;
}
[–] • 0 pt

You're welcome.

[–] • 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?