Jump to content
Please Use CODE Tags

CSS: Weird behaviour by background-position:50% 50%

shivajikobardan
By shivajikobardan
in Programming
 Share
Go to solution Solved by Eigenvektor,

Because the body of your page is only as large as it needs to be to contain its content (i.e. "my name is tommy"). The image is in the center of that, not in the center of your browser window. HTML typically does not care how large your browser is, it cares how large the particular element is.

 

If you add some more text, you'll see the image stays centered based on its total height. 

<!DOCTYPE html>
<html>
    <head>
        <style>
body {
  background-color: yellowgreen;
  background-repeat: no-repeat;
  background-image: url(circle.png);
  background-position: 50% 50%;
}
        </style>
    </head>

    <body>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
    </body>
</html>

 

If you add enough text, you'll see the image scrolls along with the page and stays centered based on the size of the content. If you add 

background-attachment:fixed

instead, it'll stay centered relative to the browser window instead.

Posted

HTML: 

<body>
    my name is tommy
  </body>

CSS: 

body {
  background-color: yellowgreen;
  background-repeat: no-repeat;
  background-image: url(circle.png);
  background-position: 50% 50%;
}

This is the image.

Izaxy7hqtDgQGYlUSiH1OE0VD_1aQoVdYzQzq8-GNm0kcYiosUmOHVG78kARn5O7pPgRUDGWV0aTZnOzO7wWxKKa0tSzxAro9ZSGnSPofhy0LooHdOD_fZeqlAGjok94oiVe7PabFvArSvhBzVTAnY8y6o1eqPBcYj1Vw7gewiPH9V1Yj3BjJmnz4YI_ZA

Expected Output:


Image at the center of the page.

 

But I am not getting it
.
But when I add 

background-attachment:fixed

I get the expected output. I want to understand why is that case?

 

I really don’t understand this behaviour. 

Link to post
Share on other sites
Posted
  • Solution

Because the body of your page is only as large as it needs to be to contain its content (i.e. "my name is tommy"). The image is in the center of that, not in the center of your browser window. HTML typically does not care how large your browser is, it cares how large the particular element is.

 

If you add some more text, you'll see the image stays centered based on its total height. 

<!DOCTYPE html>
<html>
    <head>
        <style>
body {
  background-color: yellowgreen;
  background-repeat: no-repeat;
  background-image: url(circle.png);
  background-position: 50% 50%;
}
        </style>
    </head>

    <body>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
        No, this is Patrick!<br/>
    </body>
</html>

 

If you add enough text, you'll see the image scrolls along with the page and stays centered based on the size of the content. If you add 

background-attachment:fixed

instead, it'll stay centered relative to the browser window instead.

Remember to either quote or @mention others, so they are notified of your reply

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×