How do I ensure that the background image covers the entire page

Code

const settings = {
    showArrows: false,
    swipeable: true,
    stopOnHover: true,
    autoPlay: true,
    infiniteLoop: true,
    transitionTime: 1000,
    showIndicators: false,
    useKeyboardArrows: true,
    emulateTouch: true,
    showThumbs: false,
}

return (

    
    <Carousel  {...settings}>
        <div className="about-banner-one">
            <div className="about-banner-content">
                <img className="about-image" alt="" src={image1}/>
                    
            </div>
             ...
        </div>

    </Carousel>

the css

.about-image{
    width: 100vw !important;
    height: 60vh !important;
}
.about-banner-one{
    padding: 0;
    height: 60vh;
    /* background-image: linear-gradient(to right, rgba(0, 0, 0, 0.955), rgba(0, 0, 0, 0.784)), url(../../../assets/cargoplane\ 2.jpg); */
    background-attachment: fixed;
    background-size: cover;
    background-position: bottom;
    position: relative;
    bottom: 20px;
    width: 100vw;
}
...

I had tried putting the as background image of the div (explains different div names) at css but the image wont show. How do I get rid of the previous image highlighted?

And how do i do the transitions?