Small background image gap | Scrimba | Page 1

jolly summit Dec 8, 2022, 9:56 AM

#

In my project there's a div with a background image and for some reason the background image doesn't really cover the entirety of the div, leaving a small one pixel gap at the bottom. I set the div's background color to red so that it's more visible.

../../assets/images/hero-bottom-section-illustration.svg is the planet thingy and ../../assets/images/hero-bottom-section-bg.png is the background i'm having the problem with

Here's the CSS for the div:

    &:nth-of-type(2) {
        background-image:
            url(../../assets/images/hero-bottom-section-illustration.svg),
                url(../../assets/images/hero-bottom-section-bg.png);
        background-repeat: no-repeat;
        background-position: center right 208px, center center;
        background-size: 457px 441px, cover;
        min-height: 740px;
        padding-top: 230px;
        background-color: red;
        color: #fff;
    }