background-position

Background properties can be set for individual elements or as a global (default) property which will effect the entire contents of the page. If a background property is not specified, the browser will implement the default color scheme (which is rather dull), which will almost certainly not look the way you intended. background-position The background position property is used to position the background in the box defined by the element. The position of the image, or item, to be used is indicated in relation to the area of the element box. background-position values length This value specifies the measurement options for the placement of the background element. The measurement indicates the distance from the box border where the browser starts to render the image. The measurement options for this value are: • mm millimeters. • cm centimeters. • in inches. • pt points, which is a way of measuring the font size. One point is 1/72 (one seventy-second) of an inch. • pc picas, which is yet another way of measuring font size. One pica is equal to 12 points. • px pixels, which is one screen element. The display you're looking at is comprised of thousands of individual dots, each of which can change in color and luminosity to achieve the desired image. Each of these dots is referred to as a pixel. • ex x-height settings, which is the height of the font's lower case letter 'x'. • em em setting. One em is equivalent to the width of a capital letter in the chosen font. Millimeters, centimeters, inches, points, and picas are considered to be absolute lengths because you're specifying the exact size of the measurement. Relative units such as em and ex are interpreted as references to the element. Percentage This value indicates where on the box edge the image is placed, and is meaured as a percentage of the box area. vertical position This value sets the vertical starting point for where the image is to be placed. The options used are top, bottom, or center. horizontal postion This value sets the horizontal starting point for where the image is to be placed. The options used are right, left, or center background-position conventions When stating the positioning of an image, two numbers may be used to indicate the vertical and horizontal starting point. The first whill be the vertical, the second the horizontal. length or percentage values may be used. There is, however, some difference between using a percentage value and a measured value: The percentage will apply to both the image and the element bo the same way. The measured length value will begin its measurement from the point the top left corner of the image appears. A value of 0% 0% is the same as using a value of top left. A value of 50% 50% will cause the positioning to begin at the middle of the element and the image. If the image is larger than the lement box, the overlapped parts of the image aren't displayed. A value of 50% 2.5cm would cause the starting point for measuring the placement of the image at the middle of the box and to stat rendering the image at its middle. The image would begin to appear at 2.5 centimeters below the top of the element box. A decimal, a positive, or a negative number may be used when specifying the length. EXAMPLES: body {background-image: url(logo.gif); background-position: 50% 50%} This example causes the image file 'logo.gif' to be positioned at the exact center of the document, since the background-position and background-image properties were used with BODY. P {background-image: url(headingback.gif); background-position: top left} This example cause the image 'headingback.gif' to be displayed as the background within the area of the heading level P. The image will be positioned in the top left corner of the P element box.