没有特定高度的背景图像 [英] Background image without specific height

问题描述

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

这是我的背景。

 从'..'导入coolImportedImage。 /../images/image_background.jpg'; 
 
 const BackGroundContainer = styled.div` 
 background-image：url（$ {coolImportedImage}）; 
背景重复：不重复; 
 background-size：cover; 
宽度：100％; 
 height：1080px; 
`; 
  

...以及渲染方法：

< pre $ lt; code> render（）{

return（
< BackGroundContainer>
< CenteredLoginPanel>
...某些组件...
< / CenteredLoginPanel>
< / BackGroundContainer>
）;
}

除了我希望高度也是相对的，只是填充窗口的背景宽度。

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

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

或者有没有更好的方法来完成这一切，因为在我的方法开始与错误的div？

解决方案

给视口高度

 身高：100vh; 
  

I'm creating a React page.

I want to add a background image that covers the background no matter the window size or resolution etc.

so here's what I have for the background.

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;
`;

...and the render method:

render(){

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

It's working except I'd like the height also to be relative. Just filling the background of the window as the width does.

However, height doesn't work with 100%. It needs to have a specific value such as 1080px (this image is 1080px high).

Now, I know the reason for this. a div has to have some content to render. But what I'm looking for is the best practice for getting what I want to do here, which is a background covering the width and the height of the window.

Or is there a better way to do this altogether as in is my approach with the div wrong to begin with?

解决方案

Give viewport height

height:100vh;

这篇关于没有特定高度的背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！