CSS Background-Position Property

SQL     Data Warehousing     CSS     PHP     HTML     Database Normalization


CSS Tutorial  >  Background   >   Background-position

The background-position property specifies the position of the background. The values can be specified in three ways: keywords, percentage values, and position values. Each is discussed in detail below.

Keywords

This is often displayed as a two-word combination of the following terms,

top, bottom, left, right, center

The words can be in either order. For example, "top left" and "left top" are equivalent.

When keywords are used, it refers to both the position of the element and the position of the image. For example, if we specify "bottom left," it means the bottom left corner of the image touches the bottom left corner of the element. Below is an example.

CSS declaration

background-image: url(1keydata.gif);
background-repeat: no-repeat;
background-position: bottom left;

Result:

If only one keyword is used, we get the following:

KeywordHorizontal PositionVertical Position
leftleftcenter
rightrightcenter
topcentertop
bottomcenterbottom
centercentercenter

Percentage Values

This is shown as two percentage values: The first indicating the horizontal percentage, and the second indicating the vertical percentage. The two values are separated by space.

Similar to keywords, the percentage values refer to both the position of the element and the position of the image. For example, "30% 25%" means that a point that is 30% from the left of the image and 25% from the top of the image is aligned with a point that is 30% from the left of the element and 25% from the top of the element. An example is shown below.

CSS declaration

background-image: url(1keydata.gif);
background-repeat: no-repeat;
background-position: 30% 25%;

Result:

If only one percentage value is specified, it is treated as the horizontal percentage. The vertical position is treated as 50% (or center).

Position Values

This is shown as two position values: The first indicating the absolute horizontal position, the second indicating the absolute vertical position. The two values are separated by space.

When position values are used, it refers to where the top left edge of the image is located within the element. Let's look at an example below:

CSS declaration

background-image: url(1keydata.gif);
background-repeat: no-repeat;
background-position: 80px 120px;

Result:

In this example, the top left corner of the image is located 80px from the left of the element and 120px from the top of the element.

Negative position values can be used. When this happens, part of the background image will not be visible. Let's look at the example below:

CSS declaration

background-image: url(1keydata.gif);
background-repeat: no-repeat;
background-position: -80px 120px;

Result:

Here, the horizontal position is -80px, meaning the image started 80px to the left of the left border of the element. Hence only part of the image is now visible.

Default Value

The default value for background-position is [top left]. This is equivalent to specifying 0%, 0% in percentage values and 0, 0 for position values.

Next: CSS Background-Repeat




Copyright © 2016   1keydata.com   All Rights Reserved   Privacy Policy   About   Contact