Reactjs 如何在React中设置适合屏幕的背景图像

我试图在组件中设置背景图像，但它没有显示。 这是我的home组件代码

homecomponent.js

import React, { Component } from "react";
import logo from "./logo.png";
import CreateUser from "./create-user.component";
import { BrowserRouter as Switch, Route, Link } from "react-router-dom";
import "./custom.css";

export default class home extends Component {
  render() {
    return (
        <div className="container-fluid homepage-bgimage"></div>
    );
  }
}

---

我还在index.css文件中100%添加了正文html，但背景图像仍然没有显示。

它正在工作，似乎您需要将组件重命名为

Home

，而不是

Home

。主页bgimage{
背景：url（“https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg");
高度：100vh；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
}

---

您需要将高度测量值从%更改为vh，或者您必须为放置图像的容器设置大小，因为现在它是0，图像从0px获取100%。您可以为container 100vh设置，为bgimage设置100%

在此处创建一个演示问题的最小示例如果我在诸如Hello之类的标记之间写入任何内容，则会为该特定div显示背景图像，但不会显示到完整屏幕。默认情况下，代码在html/body之间有一个父

#根

元素和剩余的内部标记，因此您不能期望css在不考虑根的情况下工作

.homepage-bgimage {
  background: url("http://abcd.com/static/media/slide.504dc6e6.jpg");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}