How to set h1 after background image using CSS in ReactJS

Question

Let me explain what I need to do.

I have set a header image as below.

And this is react code and relevant css for this

HeaderImage.jsx

import React, { Component } from "react";
import { Container, Col, Row } from "react-bootstrap";

class HeaderImage extends Component {
  render() {
    return (
      <div className="container-fluid">
        <div id="header-photo" className="header-text-wrapper">
          <div
            className="img-responsive header"
            src="../images/header2.jpg"
          ></div>
        </div>

        <div className="header-text">
          <div className="row">
            <div className="col-sm-12 col-12 col-md-12">
              <h2>Hi!, I am Sneha :)</h2>
            </div>
          </div>
        </div>
        <hr />
      </div>
    );
  }
}

export default HeaderImage;

and this is the custom.css I am using to style this header image and text on top of it

.header {
  position: fixed;
  top: 0;
  /* left: 0; */
  height: 100px;
  min-height: 600px;
  background: url("../images/flower.jpg") no-repeat top center;
  background-attachment: fixed;
  background-position: center top;
  background-size: cover;
  width: 100%;
  overflow: hidden;
  background-size: 100% auto;
}

.texts-on-header {
  color: white;
}


.header-text-wrapper {
  position: relative;
  top: 20% !important;
  margin-top: 10%;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

h2 {
  font-size: 3.4em;
  color: white;
  font-family: "Cherry Swash", cursive;
}

.header-text {
  position: absolute;
  top: 40%;
  left: 32.5%;
  transform: translateY(-50%);
}

Later this HeaderImage.jsx is being called in App.js as below.

import React, { Fragment } from "react";
import logo from "./logo.svg";
import "./App.css";
import { Navbar, Nav, NavDropdown } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import "./assets/css/custom.css";

import NavigationBar from "./pages/NavBar";
import HeaderImage from './pages/HeaderImage'

function App() {
  return (
    <Fragment>
      {/* <NavigationBar /> */}
      
      <HeaderImage/>

      <h1>Welcome</h1> ----------------> this is not showing right below the HeaderImage, but behind the HeaderImage
      
    </Fragment>
  );
}

export default App;

Now my problem is: When I try to add some other content as above <h1>Welcome</h1> ot doesn't show right under the HeaderImage . It always adds behind the HeaderImage . How do I know this? I commented the HeaderImage part and I can see it like below:

Answer 1

Your .header is positioned fixed and so on a higher z-index (overlay level). That's why your content is behind the header. Remove position: fixed; or create an element with a height equal to the Header to push the Content.