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

left of the given element to fill up the element's background. Thankfully we can use the
background-repeat and background-position properties to control how or
even whether the image repeats.
Background Repeat
By default, a background image will repeat indefinitely, both vertically and horizontally,
unless otherwise specified. The background-repeat property may be used to change
the direction in which a background image is repeated, if repeated at all.
Click here to view code image
1. div {
2. background-image: url("alert.png");
3. background-repeat: no-repeat;
4. }
The background-repeat property accepts four different values: repeat , repeat-
x , repeat-y , and no-repeat . The repeat value is the default value and will repeat
a background image both vertically and horizontally.
The repeat-x value will repeat the background image horizontally, while the repeat-
y value will repeat the background image vertically. Lastly, the no-repeat value will
tell the browser to display the background image once—that is, do not repeat it at all.
Background Position
By default, background images are positioned at the left top corner of an element. However,
by using the background-position property, we can control exactly where the back-
ground image is placed relative to that corner.
Click here to view code image
1. div {
2. background-image: url("alert.png");
3. background-position: 20px 10px;
4. background-repeat: no-repeat;
5. }
The background-position property requires two values: a horizontal offset (the first
value) and a vertical offset (the second value). If only one value is specified, that value is
used for both the horizontal and the vertical offsets.
Because we're moving the background image from the left top corner of the element,
length values specifically will be in relation to that corner.