"background-positon:center" does not work with "background-attachement:scroll" - css

Question

I am making a layout with an background in body. I need to center it both horizontally and vertically. For that purpose I use background-position:center.
background-image:url('address');
background-repeat:no-repeat;
background-position:50% 50%;
However, the background not positoned correctly vertically: you can see only half of the image in the top of the screen. Check it here link to codepen.
As a solution I tried to use images with different sizes and background-position:50% 50%. Then I double-checked other background-relative selectors and found that if I add background-attachement and change it from its default value which is scroll to fixed, than the image is centered correctly.
Can anybody explain please why this happens?

Answer 1

It happens if you didn't gave the body a height, as its default is 0.
The body's height is based on its content, and a background image doesn't set it.
Here is a sample showing how you need to do
html, body {
margin: 0;
height: 100%;
}
body {
background-image: url(http://placehold.it/200);
background-repeat: no-repeat;
background-position: center center;
}
Sometimes it can create other issues when one need to give the body a height, and when, a positioned div is one option
#bkgdiv {
position: absolute;
left: 0; top: 0; right: 0; height: 100vh;
background-image: url(http://placehold.it/200);
background-repeat: no-repeat;
background-position: center center;
}
<div id="bkgdiv"></div>
So, based on how/if you need to use background-attachment: scroll and/or positioned div's, here is a sample showing their behavior when one scroll (and a fiddle demo to play with)
html, body {
margin: 0;
height: 100%;
}
body {
background-image: url(http://placehold.it/200);
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
}
#bkgdiv {
position: absolute;
left: 0; top: 0; right: 0; height: 100vh;
background-image: url(http://placehold.it/180/0f0);
background-repeat: no-repeat;
background-position: center center;
}
#bkgdivfixed {
position: fixed;
left: 0; top: 0; right: 0; height: 100vh;
background-image: url(http://placehold.it/160/ff0);
background-repeat: no-repeat;
background-position: center center;
}
<div id="bkgdiv"></div>
<div id="bkgdivfixed"></div>
<div style="width: 5px; height: 150vh; background: red; margin: 5px"></div>

Answer 2

If you want to gave background to body, its really simple task.
initially you need to write css for body and html
html, body {
margin: 0;
height: 100%;
}
The next ting is you need to gave background css to the body
body {
background-image: url(https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg);
background-position: center;
background-repeat: no-repeat;
}
Okey now the image seems to be the center of the body(screen),
Now you can adjust the size using background-size property.
background-size: cover;
The images enlarged enough to cover the entire screen.
background-size: contain;
The images enlarged up to the height or width(which is smaller) of the screen.
you can give fixed size my giving size to it
background-size: Xpx Ypx;