如何在 ReactJS 中设置 BackgroundImage 整页？

Question

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

这是我正在尝试实现的示例： 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'
}

如何在 ReactJS 中设置 BackgroundImage 整页？

How to set BackgroundImage full page in ReactJS?

css

background-image

reactjs