How to place a background image header in react js

In this short lesson you will be shown how to place a background image as part of your page header styling.

A pure react project will be used to demonstrate this feature; however, you can implement this feature even if you have React integrated with a server-side language, just follow the steps below.

In case you want to have some understand of how to create a React project, please go here https://wecode101.com/create-react-app

You will really only have to get an image, create 2 directories and one component. Therefore, these can be placed within your project where the react components are situated if you don't have purely a react project.

Step 1. Place image in folder

Go to the /src directory and create a folder called img or whatever name suits you.

Place the image in the img directory

Step 2. Create header image component

Go to the /src folder and create a directory called partials or whatever name suits you.

Within the partials folder, create a component file called HeaderImg or whatever name suits you.

place code snippet below:

import hmeImg from '../img/hme-bg.jpg';
import React from 'react';

export const HeaderImg = ({title, subTitle}) => {
    return (
        <section>
            <div style={{ backgroundImage: `url(${hmeImg})`,
                backgroundRepeat: 'no-repeat',
                backgroundPosition: 'center',
                backgroundSize: 'cover'}}>

                <div className="container" style={{minHeight: '550px'}}>
                    <div className="text-center justify-content-center align-self-center">
                        <h1 className="pt-5 pb-3">{title}</h1>
                        <h5>{subTitle}</h5>
                    </div>
                </div>
            </div>
        </section>
    )
}

The snippet above contains the image with inline styling to place the image center, behind and cover the entire page.

A min-height is also added to the div container that holds the title and subtitle in order to give a fuller look. You could add the min-height to the image itself, it all depends on the styling outcome your looking to achieve.

This component also accepts 2 params which will be your title and subtitle.

Step 3 Insert header image component

Go to /src/App.js edit and import the HeaderImg component

App.js will now look like below:

import './util/HeaderImg';
import {HeaderImg} from "./util/HeaderImg";
import "bootstrap/dist/css/bootstrap.min.css";

function App() {
  return (
    <div id="home-page">
      <HeaderImg title="Header title" subTitle="Header subtitle"/>
        <section>
          <div className="container pt-5">
            <h1>Other Stuff</h1>
            <p>
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
            </p>
          </div>
        </section>
    </div>
  );
}

export default App;

You should now be able to see the header image if you run your project.

Happy Hacking!