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.
add a background image to your body and fix that image
body
{
background: #fff url(/static/images/picup-bg-01.jpg) no-repeat fixed;
}
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>
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.
