how to use background image in react mui 5

In this tutorial, we will see how to use background image in react with material ui (mui 5).

Install & Setup Vite + React + Typescript + MUI 5

React Material UI 5 Background Image Example

 1. react mui 5 simple background image using react-mui styled @mui/system.

import * as React from "react";
import { styled } from "@mui/system";

const imageURL = "https://cdn.pixabay.com/photo/2023/05/20/20/39/european-roller-8007340__340.jpg";
const Background = styled("div")({
  position: "absolute",
  width: "100%",
  height: "100%",
  backgroundImage: `url(${imageURL})`,
  backgroundPosition: "center",
  backgroundSize: "cover",
  backgroundRepeat: "no-repeat",
});

export default function App() {
  return <Background />;
}

2. react mui 5 background image using react-mui Box component and sx prop.

import * as React from 'react';
import { Box } from '@mui/material';

export default function App() {
  const imageURL = "https://cdn.pixabay.com/photo/2023/05/20/20/39/european-roller-8007340__340.jpg";
  return (
    <Box
      component="div"
      sx={{
        position: 'absolute',
        width: '100%',
        height: '100%',
        backgroundImage: `url(${imageURL})`,
        backgroundPosition: 'center',
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat'
      }}
    />
  );
}

3. react background image using react jsx style.

import React from "react";

export default function App() {
  const imageURL = "https://cdn.pixabay.com/photo/2023/05/20/20/39/european-roller-8007340__340.jpg";
  return (
    <div
      style={{
        backgroundImage: `url(${imageURL})`,
        backgroundPosition: "center",
        backgroundSize: "cover",
        backgroundRepeat: "no-repeat",
        height: "100vh",
        width: "100%",
      }}
    ></div>
  );
}