Estoy tratando de configurar una imagen de fondo para que sea de pantalla completa.
Aplicación.js:
import React from 'react'; import backgroundImage from './Resources/img.jpeg' function App() { return ( <div className="container" style={{ backgroundImage: `url(${backgroundImage})` }} > <h1>Hello</h1> </div> ); } export default App;índice.css
.container { height: 100%; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-repeat: no-repeat; background-position: center; overflow: hidden; }índice.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <title>Weakly Scheduler</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> </body> </html>La imagen está recortada y muestra solo la parte donde está el Hola. si agrego más de estos, las imágenes "revelan" más de su altura. A partir de esto, creo que el contenedor en sí no está completamente protegido, pero no sé por qué. El ancho es pantalla completa como quiero que sea. ¿Y las ideas?
Actualice su estilo de la siguiente manera:
.container { height: 100vh; width: 100vw; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-repeat: no-repeat; background-position: center; overflow: hidden; } body, html { height: 100%; margin: 0; padding:0; } .container { width: '100vw'; height: '100vh'; background-image: `url(${backgroundImage})`; background-position: 'center'; background-size: 'cover'; background-repeat: 'no-repeat'; } const containerStyle= { width: '100vw', height: '100vh', backgroundImage: `url(${backgroundImage})`, backgroundPosition: 'center', backgroundSize: 'cover', backgroundRepeat: 'no-repeat', } function App() { return ( <div className="container" style={containerStyle} > <h1>Hello</h1> </div> ); }