How to Add Background Image in React with Tailwind CSS

In this tutorial, we will see how to use background images in React.js with Tailwind CSS. We’ll cover various examples of background images with Tailwind CSS & React.

Tool Use

React JS

Tailwind CSS

Example 1

React with tailwind css background image using inline style.

export default function Images() {
  return (
    <>
      <div className="flex justify-center items-center h-screen">
        <div
          className="bg-cover bg-center h-80 w-96"
          style={{
            backgroundImage:
              "url('https://cdn.pixabay.com/photo/2023/01/23/09/26/cat-7738210__340.jpg')",
          }}
        ></div>
      </div>
    </>
  );
}

You can also define an image variable, which makes it much easier to read and understand the code.

export default function Images() {
  const imageURL = "https://cdn.pixabay.com/photo/2023/01/23/09/26/cat-7738210__340.jpg";

  return (
    <>
      <div className="flex justify-center items-center h-screen">
        <div
          className="bg-cover bg-center h-80 w-96"
          style={{
            backgroundImage: `url(${imageURL})`,
          }}
        ></div>
      </div>
    </>
  );
}

Example 2

You can use a background image in React by utilizing Tailwind’s bg-url class.

export default function Images() {
  return (
    <>
      <div className="flex justify-center items-center h-screen">
        <div className='bg-[url("https://cdn.pixabay.com/photo/2023/01/23/09/26/cat-7738210__340.jpg")] bg-cover bg-center h-80 w-96'></div>
      </div>
    </>
  );
}