Skip to content Skip to sidebar Skip to footer
Home / Background Image / Css / Html / Zurb Foundation

Background Image Renders Differently On Server Then On Localhost

Post a Comment
I have setup streched background on the homepage of https://picup.it through the class
Which is defined as below: .bg-background { height: 1

Solution 1:

add a background image to your body and fix that image

body {

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

}

Solution 2:

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>

Solution 3:

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.


Post a Comment for "Background Image Renders Differently On Server Then On Localhost"