Search code examples
htmlcssdrupal-7

CSS percentage value needs to be different on live server than on local

I have a drupal 7 site, and I have a page wrapper <div> that fills up the page. 

<div id="page-content">
    all the html in here.
</div>

Using CSS, I put a background image on that div#page-content

div#page-content {
    background-image: url('somelinktoimageurl');
    background-position: 120% 10%;
}

I have the same site on my local server with same settings as the live site. However, on the live site the background-position percentage value needs to be altered to have it on the same position as on my local site. Different percentage values between local and live sites are needed to put the image in the same position. I really don't know why this happens. This has happened to me once before but I just changed the value on the live site and lived with it. But this time I would like to know why that would happen.

Note: the live and local site viewed in the same browsers, Firefox and Chrome.

I am adding some screenshots below, My livesite screenshot with devtools open showing the position value

enter image description here

Same on local

enter image description here

As you can see the on the local the same value sits a lot higher on my local.

Solution

  • The issue was the lines of text. As I have percentage based position, it is calculated on the total height of the page. Since I had more Content/Lorem Ipsums on my local, the percentage would obviously differ than the live which only had fewer content.