没有特定高度的背景图片答案

【问题标题】：Background image without specific height没有特定高度的背景图片
【发布时间】：2018-02-15 08:57:51
【问题描述】：

我正在创建一个 React 页面。

无论窗口大小或分辨率等，我想添加一个覆盖背景的背景图像。

这就是我的背景。

import coolImportedImage from '../../images/image_background.jpg';

const BackGroundContainer = styled.div`
    background-image: url(${coolImportedImage});
    background-repeat: no-repeat;
    background-size:cover;
    width: 100%;
    height: 1080px;
`;

...和渲染方法：

render(){

    return(
      <BackGroundContainer>
        <CenteredLoginPanel>
          ...some components...
        </CenteredLoginPanel>
      </BackGroundContainer>
    );
  }

除了我希望高度也是相对的之外，它可以正常工作。就像宽度一样填充窗口的背景。

但是，高度不适用于 100%。它需要有一个特定的值，例如 1080px（此图像为 1080px 高）。

现在，我知道原因了。一个 div 必须有一些内容才能呈现。但我正在寻找的是获得我想要在这里做的最佳实践，即覆盖窗口宽度和高度的背景。

或者有没有更好的方法来完全做到这一点，因为我的 div 方法一开始就错了？

【问题讨论】：

标签： html css reactjs background-image

【解决方案1】：

给定视口高度

height:100vh;

【讨论】：

【解决方案2】：

尝试使用 VH 而不是 px 作为高度。希望它会工作

const BackGroundContainer = styled.div`
background-image: url(${coolImportedImage});
background-repeat: no-repeat;
background-size:cover;
width: 100%;
height: 100vh;

【讨论】：