Как установить BackgroundImage полную страницу в ReactJS?

Question

Я пытаюсь установить фоновое изображение как полноразмерное изображение, но оно отображается маленьким (даже при использовании внутри header.css height: 100%), я только начал изучать responseJS, пожалуйста, объясните мне, как это исправить?

вот пример того, что я пытаюсь достичь: 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;

header.css

#header {
height:100%;
}

Я ценю вашу помощь!

Answer 1

Вы можете разместить свое изображение абсолютно на странице и сделать так, чтобы оно покрывало весь экран высотой 100vh и шириной 100vw.

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