背景图像在服务器上不同地在本地主机上呈现 [英] Background image renders differently on server then on localhost
问题描述
我在 https://picup.it 的首页上通过类
<div class="bg-background">
其定义如下：
.bg-background {
height: 100%;
}
.bg-background:after{
background: url({% static "images/picup-bg-01.jpg" %}) no-repeat;
background-size: 100%;
content: "";
opacity: 0.6;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
};
但是，它在localhost看起来有点不同。在生产（picup.it）背景图像被拉伸到屏幕大小 - 你可以观察到，向下滚动一个div与面板将走出背景图像。
However, it looks slight different on localhost. In production (picup.it) background image is stretched to the screen size - you can observer that after scrolling down a div with panel is going out of the background image.
然而，在localhost上，背景图片覆盖了整个div，并在滚动下方，直到div结束的地方。
On localhost however, background image covers full div and goes below the scrolling - until the place where div ends.
为什么？与Chromium和Firefox相同。
Why? Same with Chromium and Firefox.
推荐答案
请尝试此语法
.bg-background {
background:url({% static "images/picup-bg-01.jpg" %}) center no-repeat;
height:565px; /* just pick a random height */
width:100%;
position:absolute;
opacity: 0.6;
background-size:100%;
z-index: -1;
}
这可能是因为你没有指定高度，
It may also due to you didnt specify a height, thus it scaled differently.
第二个解释，在检查您的html dom struture时。
second explanation, upon inspecting your html dom struture you did.
<body>
<div class='bg-background'>
<!--- html content -->
</div>
</body>
应该是
<body>
<div class='bg-background'>
</div>
<div id='body-content'>
<!-- html content -->
</div>
</body>
这篇关于背景图像在服务器上不同地在本地主机上呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
