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

©2024 Poal.co

618

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

[–] • 1 pt

Try to remove this so you are not specifying the width: width: 100vw !important;

and change your: background-size: 96% !important; to background-size: cover !important;

See if that works how you would like.

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