HTML and CSS Reference
In-Depth Information
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.
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.
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.
Search WWH ::
Custom Search