Detalles de la pregunta:

Estaba tratando de configurar la imagen de fondo para que reaccionara, pero el posicionamiento no funciona correctamente. La imagen se amplía mucho, además, cuando cambio la propiedad de tamaño de fondo de la cubierta al contenido, se apretará hacia el centro en lugar de tomar todo el ancho del contenedor.

Reaccionar componente

 import React from 'react' import arrow from '../images/icon-arrow-down.svg' function Showcase() { return ( <div> <section className="showcase"> <div className="overlay"> <h1>We are creative</h1> <img src={arrow} alt="" /> </div> </section> </div> ) } export default Showcase; ----------

Código CSS

 **<!-- language: lang-css -->** /*ShowCase*/ .showcase{ background-image: url('./images/mobile/image-header.jpg'); height:100vh; background-size: cover; background-position: center bottom; background-repeat: no-repeat; background-size: 100% } .showcase .overlay{ height:512px; display:flex; align-items: center; justify-content: center; } <!-- end snippet -->

La vista previa de salida es [1]: https://i.stack.imgur.com/M1NRu.jpg