Componente de tarjeta de imagen de fondo React Rebass

React Rebass es un framework front-end que fue diseñado teniendo en cuenta a React. En este artículo, sabremos cómo usar el componente de tarjeta de imagen de fondo en React rebass. La tarjeta de imagen de fondo  es un componente importante que se requiere en cada desarrollo. Entonces, para crear un componente de tarjeta de imagen de fondo, podemos importar el componente de tarjeta de imagen de fondo Rebass.

El componente Tarjeta de imagen de fondo se utiliza para importar una imagen de fondo en una tarjeta.

Sintaxis:

<Box backgroundImage: 'url(link)'></Box>

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el siguiente comando.

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando.

cd foldername

Paso 3: Instale React Rebass en su directorio dado.

npm i rebass

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo: Este es el ejemplo básico que muestra cómo usar el componente Tarjeta de imagen de fondo.

import React from "react";
import { Box, Heading } from "rebass";
  
const App = () => {
  return (
    <div id='gfg'>
      <h2>GeeksforGeeks</h2>
      <h4>React Rebass Background Image Card Component</h4>
      <Box
        sx={{
          px: 4,
          py: 6,
          width: 825,
          backgroundImage: 
          'url(
https://media.geeksforgeeks.org/wp-content/uploads/20220211230158/blu-200x112.png)',
          borderRadius: 8,
          color: 'green'
        }}>
        <Heading
          textAlign='center'
          fontSize={[5, 6]}>
          GeeksforGeeks
        </Heading>
      </Box>
    </div>
  );
};
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación desde el directorio raíz del proyecto, utilizando el siguiente comando.

npm start

Producción:

Referencia: https://rebassjs.org/recipes/background-image-card