background-postion middle not working


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.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s