Question

我正在尝试将背景图像设置为全页图像，但是显示得很小（即使使用内部header.css高度：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整页？

1 个答案: