React在组件后面添加背景图像

Question

我正在尝试在React App的Form组件后面添加背景图像，但是背景仅显示在屏幕的一部分上。我希望它散布在整个屏幕上。这是我的Signup组件的代码，该代码将Form组件嵌套在其中。

是否有更简单/更好的方法来做到这一点？我是React和Web开发的新手。谢谢！

import React from "react";
import Form from "../Form";
import logo from "../../images/logo.png";
import background from "../../images/login_background.png";

class Signup extends React.Component {
  onSubmit = fields => {
    console.log("Got", fields);
  };
  render() {
    return (
      <div
        style={{
          backgroundImage: `url(${background})`,
          backgroundSize: "cover"
        }}
      >
        <div
          style={{ position: "relative", top: "200px" }}
          className="ui centered aligned grid"
        >
          <div>{/* <img src={logo} alt="intecreate logo" /> */}</div>
          <div className="ui raised segment">
            <Form onSubmit={fields => this.onSubmit(fields)} />
          </div>
        </div>
      </div>
    );
  }
}

export default Signup;

Answer 1

给背景更多200px

因为使用top: 200px，所以必须弥补它并增加背景的div。 一种方法是添加height: calc(100% + 200px);

例如，这将有助于在Codepen中获得工作链接。

最好在开始时使用类而不是内联样式：）

添加评论后的示例

显示我的意思的简单示例。

父亲必须有身高。

body{
  margin: 0;
}

.centered{
  text-align: center;
  height: 200px;
}

.wrap{
  background-image:url(https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
  background-size: cover;
  height: calc(100% + 50px);
}

.segment{
  background-color: #3791e1;
  height: 200px;
  width: 150px;
  top: 50px;
  position: relative;
  margin: 0 auto;
}

  <div class="ui centered aligned grid">
    <div class="wrap">
    <div class="ui raised segment">
      Form
    </div>
  </div>
</div>