Background image renders differently on server the

2019-07-10 07:12发布

站内问答 / HTML/CSS
1476 3 5

I have setup streched background on the homepage of https://picup.it through the class 

<div class="bg-background">

Which is defined as below:

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

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.

On localhost however, background image covers full div and goes below the scrolling - until the place where div ends.

Why? Same with Chromium and Firefox.

3条回答
叛逆
2楼-- · 2019-07-10 07:28

add a background image to your body and fix that image

body {

    background: #fff url(/static/images/picup-bg-01.jpg) no-repeat fixed;

}
查看更多
0人赞 添加讨论(0) 举报
走好不送
3楼-- · 2019-07-10 07:31

Do you have any browser extension? It might be CSS code is being injected into the page.

Second idea:

You could try changing your code into:

background-image: url('images/picup-bg-01.jpg');

for one, and keep:

background-size: 100%;
content: "";
opacity: 0.6;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;

EDIT:

If you use the Tryit Editor from the w3schools website, you'll see that your CSS code appears exactly as it does on your website (with the unstretched height), whereas using background-image in the same editor does provide you with the expected 100% height size.

EDIT #2:

Actually, it's not exactly what I said while writing EDIT #1. If I use your style code for the body of the page in the editor I get what you currently have on your website. If I use it in a div, however, it is properly scaled.

The code I provided seems to be working on both scenarios, though.

查看更多
0人赞 添加讨论(0) 举报
劳资没心，怎么记你
4楼-- · 2019-07-10 07:35

try this syntax instead

.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.

second explanation, upon inspecting your html dom struture you did.

<body>
<div class='bg-background'>
   <!--- html content -->
</div>
</body>

should be this instead

<body>
<div class='bg-background'>
</div>
<div id='body-content'>
<!-- html content -->
</div>
</body>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)