css - background-position

Property Name

background-position

Version

CSS 1

Description

The background-position property of cascading style sheet sets the image starting position of background image of the document.

Default value

0% 0%

Supporting browsers

Firefox
Chrome
Safari
Opera
Internet Explorer

Property values and Description

Value of keyword	Description
left top left center left bottom right top right center right bottom center top center center center bottom	If You give only one keyword for xposition and css automatically put as "center" for yposition. No need to explain for keywords. The keyword automatically tells its position.
x% y%	The left or first value indicates the horizontal position of the image and the second one is vertical position of the image. If you give first value only, css automatically put 50% for second value. 0% 0% is mentioned for top left corner position. 100% 100% is mentioned for right bottom corner position.
xpos ypos	The first value indicates the horizontal position of the image and the second one is vertical position of the image. If you give first value only, css automatically put 50% for second value. 0 0 [0px 0px] is mentioned for top left corner position. Units may be mentioned through pixel value or other CSS Units.
Inherit	This property indicates that background-position of the document should be inherited from its parent object or element.

Code view

background-position:350px 100px;

Demo

The background-position property added to the background of the sample document.

Other Variations

background-position:20% 80%;
/* you may enter its value by percentage */
background-position:center center;
/* you may enter its value as position names */

PrevNext