没有特定高度的背景图片

Question

我正在创建一个 React 页面。

我想添加一个覆盖背景的背景图片，无论 window 大小或分辨率等如何。

这就是我的背景。

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

它工作正常，但我希望高度也是相对的。只需按照宽度填充 window 的背景。

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

现在，我知道这是为什么了。 div 必须要呈现一些内容。但我正在寻找的是获得我想在这里做的事情的最佳实践，这是一个覆盖 window.

的宽度和高度的背景

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

Answer 1

给出视口高度

height:100vh;

Answer 2

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

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

`;

没有特定高度的背景图片

Background image without specific height

html

css

background-image

reactjs