background-position: center middle;
I once encountered an issue when aligning my background to the center of the page both vertically and horizontally.
So lets start by explaining how to use background-position. Background-position takes two values, a horizontal value and a vertical value as demonstrated below:
Cause and Solution:
Now, the issue rises when using middle for the vertical alignment which is the second value of the background-position. A simple fix for this would be to use 50% which is excepted for both horizontal and vertical values.
background-position: left 50%; //background would start from the left side of the page, and vertically centered within the page.
background-position: center 50%; //background would be aligned in the center of the page //here we could also use 50% rather than center.