Background Properties - Background-Position

Rule for background-position.

body {background-image: url('bg-2.gif'); background-repeat: no-repeat;

background-position: top center; background-attachment: fixed;}

The background-position property has many values to choose from.

top left, top center, top right,

center left, center center, center right,

bottom left, bottom center, bottom right,

x-%, y-%, x-position, y-position

On this page the background image has a background-position value
of "top center". You see the yin-yang image at the top center of this page.
The background image also has a background-attachment: fixed; definition so
the image will always be on the page as the viewer scrolls down.

In this red box the background image now has a background-position value of
"center center". It is also with a no-repeat value.

Its rule would be:

{background-image: url('bg-2.gif'); background-position: center center; background-repeat: no-repeat; background-color: transparent;}.

In this red box the background image now has background-position
value of "80%" with a background-repeat value of repeat-y.
The image is tiled in a vertical display 85% toward the right side
of this box. Titling on the right side is defined by the y-repeat value.

The rule for this background is:

{background-image: url('bg-2.gif'); background-repeat: repeat-y;
background-position: 85%; background-color: transparent;}