How to set BackgroundImage full page in ReactJS?

Question

I'm trying to set a background image as full page image but it's being displayed small(even when using inside header.css height: 100% ), I just started learning reactJS, please explain to me how to fix this?

here's an example of what i'm trying to acheive: https://www.devoncrawford.io/

import React, { Component } from 'react';
import Menu from './components/Menu';
import headerImg from './images/mountain.jpg';
import './style/header.css'

class App extends Component {
  render() {
    return (
    <div>
      <div id="header" style={headerStyle}></div>
      <Menu/>  
    </div>


      );
  }
}
var headerStyle ={
  backgroundImage: `url(${headerImg})`
}

export default App;

the header.css

#header {
height:100%;
}

I appreciate your help!

Answer 1

You can position your image absolutely on the page, and make it cover the entire screen with a height of 100vh and a width of 100vw.

var headerStyle ={
  backgroundImage: `url(${headerImg})`,
  position: 'absolute',
  width: '100vw',
  height: '100vh'
}