如何在ReactJS中设置背景图像整页？

Question

我正在尝试将背景图像设置为整页图像，但它显示的很小（即使在header.css高度：100％内使用），我刚开始学习reactJS，请向我解释如何解决这个问题？

这是我想要实现的一个例子：qazxsw poi

https://www.devoncrawford.io/

header.css

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;

我感谢您的帮助！

Answer 1

您可以将图像绝对定位在页面上，并使其覆盖整个屏幕，高度为

#header {
height:100%;
}

，宽度为100vh。

100vw