How to set a background Image With React Inline Styles?

In ReactJS, we can use the ‘backgroundImage’ property of CSS to set the background image for a component or particular HTML element like div. Here, we will learn to set the background image using the inline styles.

Also, we will use the absolute and relative URLs to set the background image.

Syntax

Users can follow the syntax below to use the React inline styles to set the background image.

<div
   Style = {{
      backgroundImage:
      'url("image-url")',
   }}
   >
   Div content
</div>

In the above syntax, we have used the ‘backgroundImage’ CSS property to set the background image for the div element.

Example

We have created the div element in the example below and applied inline CSS. We have set the background image using the URL. Also, we have set the height and width of the div element using the CSS. Furthermore, we have set some CSS properties for the background image.

import React from "react";
export default function App() {
   return (
      <div>
         <h2> 
            {" "}
            Using the <i> React inline styles </i> to set a background image
         </h2>
         <br></br>
         <div
            class = "image"
            style = {{
               height: "350px",
               width: "550px",
               backgroundImage:
               'url("https://is2-ssl.mzstatic.com/image/thumb/Purple123/v4/b2/1f/21/b21f21a8-e4f6-b7d2-1fec-8e5430273077/AppIcon-0-0-1x_U007emarketing-0-0-0-7-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/1200x630wa.png")',
               backgroundSize: "contain",
               backgroundRepeat: "no-repeat",
            }}
         >
            This div contains a background image.
         </div>
      </div>
   );
}

Output

Example

In the example below, we have created the imageStyle object outside the return statement of the functional component. We have added the background image in the imageStyle object.

After that, we used the imageStyle object as an inline style of the div. In the output, users can observe the background image for the div element.

import React from "react";
export default function App() {
   let imageStyle = {
      height: "350px",
      width: "600px",
      backgroundImage:
      'url("https://img.freepik.com/free-photo/wide-angle-shot-singletree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg")',
      backgroundSize: "contain",
      backgroundRepeat: "no-repeat",
      color: "white", 
   };
   return (
      <div>
         <h2>
            {" "}
            Using <i> React inline styles </i> to set a background image
         </h2>
         <br></br>
         <div class = "image" style = {imageStyle}>
            This div contains a background image.
         </div>
      </div>
   );
}

Output

Example

In the example below, we have used the relative URL to set the background image. Users can add the images in the ‘public’ directory of the React application. After that, we can use the relative path like ‘/image_name’, or if we add the image to any folder inside the public directory, we need to use a relative path like ‘/folder_path/image_name’.

Here, we show the react application’s logo as a background image using the relative path.

import React from "react";
export default function App() {
   return (
      <div>
         <h3>
            {" "}
            Using relative URLs with React inline styles to set background image
         </h3>
         <div
            class = "image"
            style = {{
               height: "400px",
               width: "550px",
               backgroundImage:
               'url("https://www.tutorialspoint.com/reactjs/images/reactjs-minilogo.jpg")',  backgroundSize: "contain",  backgroundRepeat: "no-repeat",
            }}
         >
            This div contains a background image.
         </div>
      </div>
   );
}

Output

In this tutorial, we learn to set the background image using the React inline styles. We have used the absolute and relative URLs to set the background image using the ‘backgroundImage’ CSS property.

Also, users can use CSS properties to customize the background image, such as fixing the background image in the div and avoiding repetitions.