Categories
React Answers

How to make the image background full width with React?

Spread the love

To make the image background full width with React, we set the backgroundSize CSS style to cover.

For instance, we write

import TechnicalImage from "./images/technical.jpg";

const divStyle = {
  width: "88%",
  height: "800px",
  backgroundImage: `url(${TechnicalImage})`,
  backgroundSize: "cover",
};

<div style={divStyle}>...</div>;

to set the backgroundSize to cover.

Then the image background full width.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *