Define the position of your background image. You must define a background-image to use background-position.

Value Description
size px - size in terms of pixels
em - size in terms of the current font size
in - size in terms of inches
cm - size in terms of centimeters
percentage The width of this element will be a percentage of the element it is inside of.
pos-key-term Uses key terms to specify the location. Available terms: top, right, bottom, left, and center.


p { background-image: url(../../pics/cssT/smallPic.jpg);
background-position: 20px 10px; }

h4 { background-image: url(../../pics/cssT/smallPic.jpg);
background-position: 30% 30%; }

ol { background-image: url(../../pics/cssT/smallPic.jpg);
background-position: top center; }


This <p> has a background image positioned with pixel values.

This <h4> has a background image positioned with percentages.

  1. This is an ordered list
  2. With a background that was positioned
  3. using keywords.