Setting Backgrounds & Gradients - Learn to Code HTML and CSS: Develop and Style Websites - page 131

To set a background-position value, we can use the top , right , bottom , and
left keywords, pixels, percentages, or any length measurement. Keywords and percent-
ages work very similarly (see Figure 7.1 ) . The keyword value left top is identical to
the percentage value 0 0 , which will keep an image positioned at the left top corner of the
element. The keyword value right bottom is identical to the percentage value 100%
100% , which will position an image in the right bottom corner of the element.
Figure 7.1 Background images are positioned from the left top corner of an element
One advantage of percentages over keywords is the ability to center a background image by
using 50% as a value. To center the background image at the top of an element, we can use
the value 50% 0 . Using pixels for a background-position value is also common, as
pixels give us precise control over where our background will be positioned.
Shorthand Background Image Values
The background-color , background-image , background-position , and
background-repeat properties may be rolled up into a shorthand value for the back-
ground property alone. The order of these properties as a shorthand background
property value may vary, however it commonly falls as background-color ,
background-image , background-position , and then background-repeat .
Click here to view code image
1. div {
2. background: #b2b2b2 url("alert.png") 20px 10px no-repeat;
3. }