html - 没有特定高度的背景图片

Question

我正在创建一个 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 方法一开始就是错误的？

Answer 1

给视口(viewport)高度

height:100vh;