Как установить мое фоновое изображение в соответствии с экраном в React

Question

Я пытаюсь установить фоновое изображение в компоненте, но оно не отображается. вот мой код для домашнего компонента.

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>
    );
  }
}

custom. 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;
}

Я также добавил тело html до 100% в индексе. css файл, но фоновое изображение все еще не отображается.

Answer 1

Работает, похоже, вам нужно переименовать ваш компонент в Home вместо home

.homepage-bgimage {
  background: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg");
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

<div class="container-fluid homepage-bgimage"></div>

Answer 2

Вам нужно изменить меру высоты с% на vh, или вы должны установить размер для контейнера, в который помещается изображение, потому что теперь оно равно 0, а изображение принимает 100% от 0px. Вы можете установить для контейнера 100vh и установить 100% для bgimage