Languages
[Edit]
EN

React - backgroundImage with inline style

1 points
Created by:
Dirask JS Member
3640

In this article, we would like to show you how to set a background image with React inline styles.

There are two main methods for setting the background image:

1. Using imported image

import background from "./img/background_image.png";

const App = () => {
  return (
    <div style={{ backgroundImage: `url(${background})` }}>
      // some text inside...
    </div>
  );
}

export default App;

2. With external URL

const App = () => {
  const backgroundURL = "https://images.pexels.com/photos/459653/pexels-photo-459653.jpeg";
  return (
    <div style={{ backgroundImage: `url(${backgroundURL})` }}>
      // some text inside...
    </div>
  );
};

export default App

Reference

  1. CSS - background-image

ReactJS

React - backgroundImage with inline style
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join