JIYIK CN >

To set a background image with inline styles in React:

1. Set the style attribute on the img element.
2. Set the property in the style object backgroundColor.
3. For example, backgroundImage: url(${MyBackgroundImage}).

// 👇️ import the image
import MyBackgroundImage from './background-image.webp';

export default function App() {
  const externalImage =
    'https://example.com/images/blog/react-prevent-multiple-button-clicks/thumbnail.webp';

  return (
    <div
      style={{
        backgroundImage: `url(${MyBackgroundImage})`,
        // backgroundImage: `url(${externalImage})`,
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center',
        height: '500px',
      }}
    >
      <h2 style={{color: 'white'}}>Hello world</h2>
    </div>
  );
}

This example shows how to use inline React styles to set a local or external image as a background image.

This example assumes that we have an image called in the same folder as the App component background-image.webp.

For local images, make sure you specify the correct image file path (including the extension).

For example, if we were importing images from a directory upwards, we would import as import MyImage from '../background-image.webp'.

The image must be located in the src directory of your project.

We can pass imported images to url()CSS functions or remote URLs pointing to external images.

Here is an example using a remote background image.

export default function App() {
  const externalImage =
    'https://example.com/images/blog/react-prevent-multiple-button-clicks/thumbnail.webp';

  return (
    <div
      style={{
        backgroundImage: `url(${externalImage})`,
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center',
        height: '500px',
      }}
    >
      <h2 style={{color: 'white'}}>Hello world</h2>
    </div>
  );
}

请注意, we use template literals to interpolate variables within a string.

Note that the string is enclosed in backticks ``, not single quotes.

The dollar sign and curly brace syntax allows us to use placeholders that are evaluated.

const externalImage = 'https://example.com/img.png';

const result = `url(${externalImage})`;

// 👇️ url(https://example.com/img.png)
console.log(result);

By default, template literals concatenate the parts into a single string.

This is exactly what we need, since url()the CSS function is used to include a file and takes an absolute URL, relative URL, or data URL as a parameter.