Search within TutorialsPark

CSS background-position Property


To set the background Image's Horizontal and Vertical Position.


Definition and Notes.

1. The CSS background-position property is used to control the placement of an image in the background of a page element.

2. It instructs the browser as to where the background image should begin, this is also the point from which the background repetition or tiling will occur.

3. The default position is ' 0%, 0% ' i.e top left corner.


Syntax:

CSS background-position property. internetexplorer safari firefox opera chrome

View in Splitscreen»

Code-Editor:

Note- Offset for background-position can be specfied using any combination of length(pixels,ems), keywords, percentages.

Attributes

Value Description
<percentage> To set the background-offset using percentages values.
<length> To set the background-offset values using length values(pixels and ems).
top The image is positioned at the top edge.
right The image is positioned at the right edge.
bottom The image is positioned at the bottom edge.
left The image is positioned at the left edge.
center The image is positioned at the center of the element.

Specifications

Specs Value
Name background-position
Value <percentage> | <length> | left | center | right | bottom | top
Initial Value 0% 0%
Applies to all elements.
Javascript syntax object.style.backgroundPosition="left"
Inherited No
Browser Support internetexplorer safari firefox opera chrome

Related Examples.