Search code examples
htmlcssbackground-imagebackground-size

background-size: cover leaves padding on sides, only in one case. Chrome bug?

Heyas,

Running into a weird problem where on a bunch of templated pages, only one of the pages shows this white sliver on the left of a hero banner. The banner is using a background image with size: cover, and positioned at center/center. If I remove all the content on the page, besides the hero, it still shows. It only shows in some resolutions. Chrome inspector doesn't show anything out of ordinary, and the HTML+CSS is the same for the other pages, where it doesn't show up. Anyone have any ideas on this one?

White sliver on left side of background image

Here's the CSS:

#top {
    background: url('/www/images/heros/features/features_768_1x.png') no-repeat center center;
    background-size: cover;

    @media only screen and (max-width: 375px) {
        background: url('/www/images/heros/features/features_375_1x.png') no-repeat center center;
        background-size: cover;
    }

    @media only screen and (min-width: 768px) and (max-width: 1366px) {
        background: url('/www/images/heros/features/features_768_1x.png') no-repeat center center;
        background-size: cover;
    }

    @media only screen and (min-width: 1366px) {
        background: url('/www/images/heros/features/features_1366_1x.png') no-repeat center center;
        background-size: cover;
    }
}

Fiddle: https://jsfiddle.net/fngbqyq1/

Update: -issue was image had white in it / not cropped properly (damn designer) eyeroll :p

Solution

  • try using background-size: 100% 100%;

    OR

    background-size: 100vw 100vh;

    OR Simply

    background-size: 100vw;