¿Cómo me aseguro de que la imagen de fondo cubra toda la página?

Código

 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>

el 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; } ...

Intenté poner como imagen de fondo del div (explica diferentes nombres de div) en css pero la imagen no se muestra. ¿Cómo me deshago de la imagen anterior resaltada?

¿Y cómo hago las transiciones?