Progress

Set Background Image in React.js Using inline Style CSS

Set Background Image in React.js Using inline Style CSS

React.js is a revolution in terms of a frontend framework. It is the most popular front-end framework according to Stackoverflow survey 2019. React.js works differently as compared to HTML because it uses JSX, that’s why it is often confusing to set background image in React.js.

Here are the easiest ways to set background image in React.js using inline styles CSS.

Here is the output of what we are going to code.

Output of Set background image in React.js
Output of code

Set Background Image in React using Strings in CSS

This is the simplest example to use a variable value in strings. This was the most common way to solve these problems before template literals introduced in ES6.

import React from "react";
import hcbgImage from "./hcbg.jpg";

function App() {
  return (
      <div
        class="bg_image"
        style={{
          backgroundImage: 'url('+hcbgImage+')',
          backgroundSize: "cover",
          height: "100vh",
          color: "#f5f5f5"
        }}
      >
        <h1>This is Text on top</h1>
      </div>
  );
}

export default App;

In the example, we import the image and store its path in the variable named hcbgImage. If we console log the variable, we get something like /static/media/hcbg.d1e1f550.jpg. It is the path of the image by React.js.

Using ES6 Template Literals

Template literals or string literals allow embedded expression. They are inside backtick (“) instead of double and single quote.

Template literals may contain placeholders which evaluate variables and expressions. The syntax for the placeholder is `${expression}` which is dollar character and curly braces.

import React from "react";
import hcbgImage from "./hcbg.jpg";

function App() {
  return (
      <div
        class="bg_image"
        style={{
          backgroundImage: `url(${hcbgImage})`,
          backgroundSize: "cover",
          height: "100vh",
          color: "#f5f5f5"
        }}
      >
        <h1>This is Text on top</h1>
      </div>
  );
}

export default App;

In the above example `url(${hcbgImage})` is string literal which contains placeholder hcbgImage. The placeholder evaluates the value of the variable (the path to image) and sets to URL of the background-image CSS property.

You can read more about template literals on MDN.

Background Image in React using External CSS

This is a common way to set background image in React and HTML.

The javascript file:

import React from "react";
import "./App.css";

function App() {
  return (
      <div
        class="bg_image"
      >
        <h1>This is Text on top</h1>
      </div>
  );
}

export default App;

In App.css file:

.bg_image{
  background-image: url('./hcbg.jpg');
  background-size: cover;
  height: 100vh;
  color: #f5f5f5;
}

In the example, we see that we have imported the CSS file inside React.js.

Now we can use the traditional way to set background image in React.js using CSS only.

You may also like:

Best React.js UI Component frameworks.

Share the Post ;)

Related Posts