没有特定的高度的背景图片(Background image without specific hei

我创建一个阵营页面。

我想补充一点，包括背景，无论窗口大小或分辨率等背景图像

所以这里就是我的背景。

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必须有一些内容来呈现。 但是我正在寻找的是为得到什么我想在这里做的，这是覆盖宽度和窗口的高度背景的最佳实践。

还是有更好的方法来完全做到这一点在我与格错，开始与方法？

Answer 1:

给视高度

height:100vh;

Answer 2:

尝试VH，而不是像素的高度。 希望它会工作

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

`;

文章来源: Background image without specific height