¿Cómo configurar imágenes de fondo en ReactJS?

A veces, los usuarios necesitan establecer imágenes de fondo mientras desarrollan la aplicación de reacción. En este artículo, vamos a discutir todos los métodos para configurar imágenes de fondo en la aplicación de reacción.

Discutiremos cómo configurar la imagen de fondo usando CSS en línea y CSS externo. También discutiremos varios métodos para agregar la URL de la imagen de fondo.

Requisitos previos: Los requisitos previos para este proyecto son:

• Reaccionar

Creando una aplicación de reacción

Paso 1: el usuario puede crear un nuevo proyecto de reacción usando el siguiente comando.

npx create-react-app testapp

Paso 2: A continuación, el usuario debe moverse a la carpeta del proyecto de la aplicación de prueba desde la terminal usando el siguiente comando.

cd testapp

Estructura del proyecto: se parece a la imagen de abajo.

Método 1: usar CSS en línea: en este método, agregamos el atributo de estilo dentro del propio elemento.

Nombre de archivo: App.js

En App.js, agregaremos un atributo de estilo dentro del elemento div y configuraremos la imagen de fondo para un elemento div usando CSS en línea.

import React, { Component } from 'react';
  
class App extends Component {
  render() {
    const myStyle={
        backgroundImage: 
 "url('https://media.geeksforgeeks.org/wp-content/uploads/rk.png')",
        height:'100vh',
        marginTop:'-70px',
        fontSize:'50px',
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
    };
    return (
      <div style={myStyle}>
        <h1> geeksforgeeks </h1>
      </div>
    );
  }
}
   
export default App;

Producción:

Método 2: uso de CSS externo: en este método, agregamos un archivo CSS externo para establecer una imagen de fondo para el componente de reacción.

Nombre de archivo: App.js

En App.js, agregaremos un elemento div simple con el atributo className. Además, importamos un archivo CSS externo para establecer una imagen de fondo para el elemento div.

import React, { Component } from 'react';
import './App.css';
  
class App extends Component {
  render() {
    return (
      <div  className="GeeksForGeeks">
      <h1>GeeksForGeeks</h1>
      </div>
    );
  }
}
   
export default App;

Nombre de archivo: App.css

En App.css, agregaremos un componente de reacción de estilo de código dentro del archivo App.js. Accederemos al elemento div desde el archivo App.js usando el atributo className y estableceremos la imagen de fondo.

.GeeksForGeeks {
  background-image: 
  url(
"https://media.geeksforgeeks.org/wp-content/uploads/rk.png");
  background-size: "cover";
  height: 100vh;
  margin-top: -70px;
  font-size:50px;
  background-repeat:no-repeat; 
}

Producción:

Método 3: uso de URL absoluta: los usuarios pueden acceder a la imagen de fondo directamente desde la carpeta public/ a través de la URL absoluta utilizando la variable de entorno. Antes de usar este método, no olvide agregar una imagen dentro de la carpeta pública; de lo contrario, le mostrará un error de compilación.

Nombre de archivo: App.js

Aquí, agregaremos código para establecer imágenes de fondo usando CSS en línea y variables de entorno.

import React, { Component } from 'react';
  
class App extends Component {
  render() {
    const myStyle={
backgroundImage:`url(${process.env.PUBLIC_URL+ "/image.png"})`
        height:'100vh',
        marginTop:'-70px',
        fontSize:'50px',
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
        };
    return (
      <div style={myStyle} >
        <h1>GeeksForGeeks</h1>
      </div>
    );
  }
}
   
export default App;

Producción:

Método 4: uso de URL relativa: los usuarios pueden acceder a imágenes desde la carpeta public/ o cualquier carpeta secundaria de la carpeta pública a través de la URL de ruta relativa. La URL para acceder a la imagen debe ser como <host_name>/image.png .

Nombre de archivo: App.js

En este archivo, configuramos una imagen de fondo para el elemento div utilizando la ruta relativa de la imagen. 

import React, { Component } from 'react';
  
class App extends Component {
  render() {
   const myStyle={
        backgroundImage: "url(/image.png)",
        height:'100vh',
        marginTop:'-70px',
        fontSize:'50px',
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
    };
    return (
      <div style={myStyle} >
        <h1>GeeksForGeeks</h1>
      </div>
    );
  }
}
   
export default App;

Producción:

Método 5: agregar una imagen de fondo desde la carpeta src/ Si la imagen reside dentro del directorio src , el usuario puede importarla dentro del archivador de componentes y establecerla como imagen de fondo.

Nombre de archivo: App.js

En este archivo, importaremos la imagen y la estableceremos como imagen de fondo del elemento div.

import React, { Component } from 'react';
import background from "./image.png";
  
class App extends Component {
  render() {
    const myStyle={
        backgroundImage: `url(${background})` ",
        height:'100vh',
        marginTop:'-70px',
        fontSize:'50px',
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
    };
    return (
      <div style={myStyle}>
        <h1>GeeksForGeeks</h1>
      </div>
    );
  }
}
   
export default App;

Pasos para ejecutar la aplicación de reacción: puede ejecutar la aplicación de reacción usando el siguiente comando.

npm start

Producción: