The background of an element is the area over which the content area, padding and borders are drawn. Note that an element's background does not appear in its margin.
There are six background properties in CSS — background-color,
background-image, background-attachment,
background-repeat, background-position, and background.
The background-color Property
This property specifies the color of the background of an element. It can
accept as values, color keywords, system color keywords, hexadecimal color
notation, decimal functional rgb notation, percentage functional rgb notation
and the keywords transparent and inherit; See
Specifying Color in CSS. Its initial value is transparent. The
background-color property can be applied to any element. It is not
an inherited property.
Below is an example of background-color applied to a block
element.
Example 1: <p style="margin:10px;border: 5px black
dashed;padding:15px;height:80px;background-color:aqua;font-size:35px;font-family:'TimesNew
Roman'"> the quick brown fox jumps over the lazy dog</p>
In the above example, the background color can be seen behind the content
area, padding and border (but not the margin). In Internet Explorer 6 and 7, due
to a bug, the background color does not appear behind the border. This buggy
behavior is seen on all elements that have hasLayout.
Below is an example of background-color applied to an inline
non-replaced element (a span).
Example 2: <p style="font-size:35px;font-family:'TimesNew Roman'">the
five boxing <span style="background-color:royalblue">wizards jump</span>
quickly. the quick brown <span style="margin:10px;border: 5px lightblue
dashed;padding:15px;height:80px;background-color:rgb(205,92,92)">fox
jumps</span> over the lazy dog. the five <span
style="background-color:hotpink">boxing wizards</span> jump quickly</p>
In the above example, since the browser does not allocate extra space for the second span's top and bottom border and padding, they overlap the text that is above and below. The background color of the second span covers the first span's backround color. This is because text that appears later in an (X)HTML document is higher in the stacking order. For the same reason, the background color of the third span covers the background color of the second span. Note, however, that the second span's background color appears behind the text below that does not have a background color specified. This is because, by default, text has a transparent background.
Below is an example of what happens when block elements with background colors overlap each other.
Example 3: <p style="font-size:35px;font-family:'TimesNew
Roman';background-color:orchid;width: 200px">abcdefg hijkl</p>
<p
style="font-size:35px;font-family:'TimesNew
Roman';margin-top:-35px;margin-bottom:-35px;background-color:palegoldenrod">the
five boxing wizards jump quickly. the quick brown fox jumps over the lazy
dog</p>
<p style="font-size:35px;font-family:'TimesNew
Roman';background-color:lightsalmon;width: 200px">abcdefg hijkl</p>
The above example shows that block elements that come later in the (X)HTML
document are higher in the stacking order. Because of this, the last <p>'s
background color cover the second's and the second's covers the first's.
However, unlike in inline elements, the text of any of the three <p>s
is not covered by a background color. In Internet Explorer 6 and 7, the text is
also covered by the background color. This is a bug.
Below is an example of background-color applied to an inline
replaced element (an image).
Example 4: <p style="font-size:35px;font-family:'TimesNew Roman'">the
quick <img src="20x50.jpg" alt="20x50 image"
style="background-color:mediumspringgreen;padding:5px">brown fox jumps over the
lazy dog</p>
The background color on the image can only be seen when the image has padding.
background-color:transparent
transparent is the initial value of background-color, therefore
all elements have a transparent background unless otherwise specified.
Therefore, the background-color:transparent declaration can be used
to override a background color that has been already applied to an element.
background-color:inherit
background-color is not, by default, an inherited property.
However, the background color of an element appears in its child elements
because the initial value of background-color is transparent.
Since the background color of an element is, by default, transparent, the
specified background color of an ancestor element will show through.
Internet Explorer 6 and 7 ignore CSS declarations containing the
inherit value.
The background-color:inherit causes an element to inherit its
parent's background color. The effect of the background-color:inherit
can only be observed in certain situations — two examples are shown below.
Example 5: <p style="font-size:35px;font-family:'Times New
Roman';color:red;background-color:white;background-image:url('pattern.bmp')">the
quick <span style="background-color:inherit">brown</span> fox jumps over the
lazy dog.</p>
Example 6: <p style="font-size:35px;font-family:'Times New
Roman';background-color:white">the quick brown fox jumps over the lazy dog. the
five <span style="background-color:inherit;padding-top:20px">boxing
wizards</span> jump quickly. the quick brown fox jumps over the lazy dog.</p>
The background-image Property
This property specifies an image that will appear as the background of the
content area, padding and border of an element. This property can be applied to
any element. An element can have only one
background image. background-image can take as values a URL, the keyword
none and the keyword inherit. Here, URL is the
address of an image file. The URL is within quotes and the whole expression is
within parentheses, prefixed with
url . Putting the URL withing single or double quotes is optional. The
initial value of background-image is none. It is not
an inherited property.
Example 7: <p style="font-size:35px;font-family:'Times New
Roman';background-image:url('star.gif');padding:0">the quick brown fox jumps
over the lazy dog.</p>
In the above example, the background image is aligned to the top left corner of the
content area of the <p>, and then tiled horizontally and
vertically. By default, background images are vertically and horizontally tiled.
Example 8: <p style="font-size:35px;font-family:'Times New
Roman';background-image:url('star.gif');background-attachment:scroll;padding:10px;border:
dashed powderblue 10px">the quick brown fox jumps over the lazy dog.</p>
In the above example, the <p> has both padding and a border.
Therefore, the image is aligned to the top left corner of the padding (the outer
edge of the padding), and then tiled vertically and horizontally. Internet
Explorer 6 and 7 align the background image to the top left corner of the border
(the outer edge of the border).
Inline replaced and non-replaced elements can also have background images. Only when an image has padding or a border, or when the image fails to load, can its background image be seen.
Example 9: <p style="font-size:35px;font-family:'Times New Roman'">the
<img src="20x50.jpg" alt="20x50 image"
style="background-image:url(star.gif);padding:10px;border: 10px dotted
darkseagreen">quick brown fox jumps over the lazy dog</p>
background-image:none
none is the default value of the background-image
property. Therefore, it is only useful to override another
background-image declaration that matches an element.
background-image:inherit
background-image is not an inherited property. However, since an
element's background is by default transparent, any background image of an
ancestor element can be seen within it. The background-image:inherit declaration
causes the background image of an element's parent to appear within it, aligned
to the top left corner of the element's box.
Internet Explorer 6 and 7 ignore background-image:inherit
declarations.
Example 10: <p style="font-size:35px;font-family:'Times New
Roman';background-image:url(star.gif)">five <span
style="background-image:inherit">quick</span> brown foxes jump over the lazy
dog</p>
The background-repeat Property
This property specifies whether or not a background image is tiled or
not and, if it is, whether it is tiled vertically, horizontally or both. The
background-repeat property can take the values repeat,
repeat-x, repeat-y, no-repeat and inherit.
The initial value is repeat.This is not an inherited property.
background-repeat:repeat-x
This declaration causes the background image to be tiled horizontally (the x-axis) only.
Example 11: <p style="font-size:35px;font-family:'Times New
Roman';background-image:url(star.gif);background-repeat:repeat-x;border:10px
limegreen double">the quick brown fox jumps over the lazy dog</p>
In the above example, note how the background image in the border is
vertically aligned with the background images of the content area of the
<p>. In Internet Explorer 6 and 7 the background image is aligned to the
outer top left edge of the border. This is a bug.
background-repeat:repeat-y
This declaration causes the background image to be tiled vertically (the y-axis) only.
Example 12: <p style="font-size:35px;font-family:'Times New
Roman';background-image:url(star.gif);background-repeat:repeat-y;border:10px
cadetblue double">the quick brown fox jumps over the lazy dog</p>
In the above example, note how the background image in the border is
horizontally aligned with the background images of the content area of the
<p>. In Internet Explorer 6 and 7, the background image is aligned to the
outer top left edge of the border. This is a bug.
background-repeat:no-repeat
With this declaration, the background image is not tiled at all.
Example 13: <p style="font-size:35px;font-family:'Times New
Roman';background-image:url(star.gif);background-repeat:no-repeat;border: 10px
rosybrown double">the quick brown fox jumps over the lazy dog</p>
In the above example, note that the background image does not appear in the border at all. Internet Explorer 6 and 7, the background image is aligned to the outer top left edge of the border. This is a bug.
background-repeat:repeat
This declaration is causes the background image to tile both horizontally and
vertically. Since this is the initial value of the background-repeat
property, this declaration is only useful to override another
background-repeat declaration that matches an element.
background-repeat:inherit
Since background-repeat is not an inherited property, the background-repeat:inherit declaration can be used
to make an element inherit its parent's background-repeat value.
Internet Explorer 6 and 7 ignore this declaration.
Example 14: <p style="font-size:35px;font-family:'Times New
Roman';background-image:url(star.gif);background-repeat:repeat-y">the <span
style="background-image:url(star_i.gif);background-repeat:inherit">quick</span>
brown fox jumps over the lazy dog</p>
The background-attachment Property
This property controls whether or not the background image scrolls when the web page is scrolled by the user. This property takes the
values scroll, fixed and inherit. The
initial value is scroll. background-attachment is not
an inherited property.
background-attachment:fixed
This declaration causes the background image of an element to be aligned with
the top left corner of the viewport. The alignment
can be changed using the background-position property.
With background-attachment:fixed, the background image in an
element appears in the position that it would have if it was tiled from the top
left corner of the viewport. However, if the background-repeat property is set
to no-repeat, the background image will not be tiled. Therefore, in
such a case, the background image will be visible only when the element's box is
close to the top left corner of the viewport. Similarly, if the
background-repeat property has a value of repeat-x the
background image will be visible only when the element's box appears towards the
top of the viewport. With repeat-y, the background image will be
visible only when the element is close to the left side of the viewport. Since the background image is aligned with the
viewport, it does not move unless the viewport is resized. Therefore, when the
user scrolls the web page, a fixed background image does not move with the rest
of the element.
Internet Explorer 6 renders background-attachment:fixed
correctly on the html element. background-attachment:fixed
is rendered correctly only when the body element is the same size
as the viewport.
Example 15: <p style="font-size:35px;font-family:'Times New
Roman';background-image:url(star.gif);background-attachment:fixed">the quick
brown fox jumps over the lazy dog</p>
Internet Explorer 6 does not render the background image's position fixed to the viewport. This is a bug. Internet Explorer 7 vertically misalignes the background image by 1px — it renders the background image one pixel lower than it should.
Example 16: <p style="font-size:35px;font-family:'Times New
Roman';background-image:url(star.gif);background-attachment:fixed;background-repeat:repeat-x">the
quick brown fox jumps over the lazy dog</p>
In the above example, the background image of the <p> can be
seen only when the element is scrolled to the top of the viewport. Internet
Explorer 6 does not render the background image's position fixed to the
viewport. This is a bug. Internet Explorer 7 does not render the background
image at all — the background image cannot be seen even when the <p>
is scrolled to the top of the viewport. This is a bug.
Example 17: <p style="font-size:35px;font-family:'Times New
Roman';background-image:url(star.gif);background-attachment:fixed;background-repeat:repeat-y">the
quick brown fox jumps over the lazy dog. the five boxing wizards jump
quickly</p>
In the above example, the background image can be seen on the left side of
the <p>. It is aligned to the left edge of the viewport. Internet
Explorer 6 does not render the background image's position fixed to the
viewport. This is a bug.
Example 18: <p style="font-size:35px;font-family:'Times New
Roman';background-image:url(star.gif);background-attachment:fixed;background-repeat:no-repeat">the
quick brown fox jumps over the lazy dog</p>
In the above example, the background image of the <p> can be
seen only when the element is scrolled to the top of the viewport. Internet
Explorer 6 does not render the background image's position fixed to the
viewport. This is a bug. Internet Explorer 7 does not render the background
image at all — the background image cannot be seen even when the <p>
is scrolled to the top of the viewport. This is a bug.
background-attachment:scroll
scroll is the initial value of background-attachment.
Therefore, the background-attachment:scroll declaration is only
useful to override another background-attachment declaration that
matches an element.
background-attachment:inherit
background-attachment is not an inherited property. However, the
background-attachment:inherit will cause an element to inherit its
parent element's background-attachment value.
Internet Explorer 6 and 7 ignore the inherit value.
Example 19: <p style="font-size:35px;font-family:'Times New
Roman';background-image:url(star.gif);background-attachment:scroll">the <span
style="background-image:url(star_i.gif);background-attachment:inherit">quick</span>
brown fox jumps over the lazy dog</p>
The background-position Property
This property specifies the position of the background image with respect to
the top left corner of an element's padding box (in the case of
background-attachment:scroll) or with respect to the top left corner of
the viewport (in the case of background-attachment:fixed). This property can only be applied on block-level and replaced elements
(inline or block). It is not an inherited property. Its inital value is 0%
0%. It can take length values, percentages and the keywords top,
bottom, left, right, center
and inherit. The background-position property can take
either one or two space-separated values.
Internet Explorer 6 and 7 position the background image with respect to the outer edge of the border instead of the outer edge of the padding. This is a bug.
background-position with Keywords
The keywords applicable to background-position are top,
bottom, left, right, center. background-position can take either one or two keyword values.
If a background-position declaration has only one keyword value,
the other keyword value is assumed to be center.
With keywords, the starting position of a background image is the
position at which the background image is located after aligning its top left
corner to the point specified. If the element has the declaration
background-repeat:repeat then the background image is tiled in all four
directions starting from the starting position. If the element has the
declaration background-repeat:repeat-x or
background-repeat:repeat-y, then the image is tiled left and right or up
and down, respectively, from the starting position. If the element has
background-repeat:no-repeat, then the background image is displayed at
the starting position without tiling.The top
and bottom keywords specify the starting alignment of
the background image on the y-axis (vertical axis), left
and right specify the starting alignment of the background image on
the x-axis (horizontal axis) and center refers to a point that is
equidistant from the x and y axes (the horizontal and
vertical center of an element's padding box).
Example 20: <p style="font-size:35px;font-family:'Times New
Roman';background-image:url(star.gif);background-position:top right">the quick
brown fox jumps over the lazy dog</p>
In the above example, the background image is truncated at the left and at the bottom. This indicates top right alignment.
The order of the keywords is not important — background-position:top
right and background-position: right top are equivalent.
Example 21: <p style="font-size:35px;font-family:'Times New
Roman';background-image:url(star.gif);background-position:top
right;background-repeat:repeat-x">the quick brown fox jumps over the lazy
dog</p>
In the above example, the background image is truncated at the left and aligned to the top. This indicates top right alignment.
The keyword center can refer either to the vertical alignment or
the horizontal alignment of the background image. center refers to
vertical alignment when paired with horizontal alignment keywords right
or left. center refers to horizontal alignment when
paired with vertical alignment keywords top or bottom.
Example 22: <p style="font-size:35px;font-family:'Times New
Roman';background-image:url(star.gif);background-position: center top">the quick
brown fox jumps over the lazy dog</p>
In the above example, the background image is truncated at the left, right and bottom. This indicates center top alignment.
When the background-position property has only a single keyword,
the second keyword is assumed to be center.
Example 23: <p style="font-size:35px;font-family:'Times New
Roman';background-position:left;background-image:url(star.gif);background-repeat:no-repeat">the
quick brown fox jumps over the lazy dog</p>
In the above example, the background image is positioned as if the <p>
had the declaration background-position:left center.
Below is a diagram showing all the combinations of background-position
keywords (except inherit) with the resulting starting position of
the background image.
Example 24:
Internet Explorer 6 and 7 position the background image with respect to the outer edge of the border instead of the outer edge of the padding. This is a bug.
Position keyword-valued background-position declarations with
the declaration background-attachment:fixed cause the background
image to be positioned with respect to the viewport. However, the background
image is visible only in the border box of the element.
background-position with Length Values
A background-position declaration with length values specifies
the horizontal and vertical offset of the background image. The
background-position property can take a pair of length values or a single
value. When this property has only one value, that value is considered to be the
horizontal offset and the vertical position is considered to be center.With
two values, the first length value specifies the horizontal offset and the
second length value specifies the vertical offset from the top left corner of
the padding box (in case of background-attachement:scroll) or from
the top left corner of the viewport (in case of
background-attachment:fixed).
Example 25: <p style="font-size:35px;font-family:'Times New
Roman';background-position:5px 15px;background-repeat:
no-repeat;background-image:url(star.gif)">the quick brown fox jumps over the
lazy dog</p>
Mixing length values and position keywords is allowed. When the value of a
background-declaration contains at least one length value, the first sub-value
specifies the horizontal position or offset and the second sub-value specifies
the vertical position or offset. In such cases, the first sub-value can be
left, right, center or a length value and the
second sub-value can be top, bottom, center
or a length value.
Example 26: <p style="font-size:35px;font-family:'Times New
Roman';background-position:5px bottom;background-repeat:
no-repeat;background-image:url(star.gif)">the quick brown fox jumps over the
lazy dog</p>
Negative length values are permitted in background-position
declarations. Large negative length values may cause a background image to be
not visible at all.
Example 27: <p style="font-size:35px;font-family:'Times New
Roman';background-position: -5px
-5px;background-repeat:no-repeat;background-image:url(star.gif)"> the quick
brown fox jumps over the lazy dog</p>
Internet Explorer 6 and 7 position the background image with respect to the outer edge of the border instead of the outer edge of the padding. This is a bug.
Length-valued background-position declarations with the
declaration background-attachment:fixed cause the background image
to be positioned with respect to the viewport. However, the background image is
visible only in the border box of the element.
background-position with percentage values
A background-position declaration with percentage values
specifies two points — a point on the background image and a point in the
paddding box with which the point on the background image is made to coincide.
The first percentage sub-value determines the two horizontal coordinates —
one calculated with respect to the width of the background image which
determines the horizontal coordinate of the point on the background image, and
the other calculated with respect to the width of the padding box of the element
in which the background image appears which determines the horizontal coordinate
of the point in the padding box with which the point on the background image is
made to coincide.
The second percentage sub-value determines the two vertical coordinates —
one calculated with respect to the height of the background image which
determines the vertical coordinate of the point on the background image, and the
other calculated with respect to the height of the padding box of the element in
which the background image appears which determines the vertical coordinate of
the point in the padding box with which the point on the background image is
made to coincide.
The points are determined from the top left corner of the padding box and the
top left corner of the background image
In case of an element with background-attachment:fixed, the
offset is determined with respect to the top left corner of the image and the
top left corner of the viewport.
Example 28: <div style="width:600px"><p
style="font-size:35px;font-family:'Times New
Roman';margin:5px;background-image:url(image3.png);background-position:10% 60%;
background-repeat:no-repeat;background-color:transparent;color:yellow;padding:0">
the quick brown fox jumps over the lazy dog. the five boxing wizards jump
quickly</p></div>
In the above example, the image is 50px by 50px and the padding box's width is 590px (because of the left and right 5px) and its height is 82px. The point on the image and the padding box can be found in this way:
- The value of the background-position declaration is
10% 60% - The horizontal sub-value is 10% and the vertical sub-value is 60%
- The image's width and height is 50px. 10% of 50px is 5px and 60% of 50px is 30px. Therefore the point on the image is (5px,30px)
- The width of the element's padding box is 590px and the height is 82px. 10% of 590px is 59px and 60% of 82px is 49.2px. Therefore, the point on the padding box is (59px, 49px) — 49.2px is rounded off to 49px
The point on the image is made to coincide with the point on the padding box. The horizontal and vertical distance of the top left corner of the image from the top and left outer edge of the padding box can be calculated by subtracting the background image's point from the padding box's point — (59px, 49px) - (5px, 30px) = (54px, 19px). Therefore, the top left corner of the image will be located at a horizontal distance of 54px from the outer edge of the left padding and a vertical distance of 19px from the outer edge of the top padding.
Below is an image showing different percentage values of
background-position that have keyword equivalents:
Example 29:
Internet Explorer 6 and 7 position the background image with respect to the outer edge of the border instead of the outer edge the padding. This is a bug.
Percentages greater than 100 are allowed. — they cause the background image to be partially visible or to be not visible at all. When a background image is positioned such that a part of it is outside the padding box, it will be visible behind borders, but it will not be visible in the margins of the element.
A value that is greater than 100% causes the padding box alignment point to be outside the padding box. It also causes the background image alignment point to be outside the image — it is as if the image is larger than it really is. When the two alignment points coincide, the background image will be partially visible or not visible at all.
Example 30: <div style="width:200px;"><p
style="font-size:35px;font-family:'Times New
Roman';background-image:url(image3.png);background-repeat:no-repeat;
background-position:0% 120%;margin:0;padding:0;border:dashed 35px skyblue">the
five boxing wizards jump quickly</p></div>
In the above example, the height of the <p>'s padding box is 205px. The
vertical sub-value of the background-position declaration is 120%.
Therefore the vertical coordinate of the padding box alignment point is 120% of
205px, which is 246px. The horizontal coordinate is zero. Therefore, the padding
box alignment point will be 246px - 205px = 41px below the outer edge of the
padding. The size of the image is 50px by 50px. The vertical sub-value of
the background-position declaration is 120%. Therefore the vertical
coordinate of the background image alignment point is 120% of 50px, which is
60px. The horizontal coordinate is zero. Therefore the alignment point will be
10px below the left edge of the background image. The image will therefore
behave as if it is 60px tall. The vertical height of the image that is outside
the padding box will be 41px - 10px = 31px and the part visible in the padding
box is 50px - 31px = 19px.
Internet Explorer 6 and 7 position the background image with respect to the outer edge of the border instead of the outer edge of the padding. This is a bug.
Example 31: The picture below shows a background image of height and width
50px positioned in a padding box of height and width 200px. The picture shows
the positions of the background image for the declarations
background-position:10% 20%, background-position:90% 120%
and background-position:50% -20%.
The number of pixels that the background image is moved can be calculated by
subtracting the horizontal and vertical positions of the background image from
the corresponding positions of the padding box. For example, if the padding box
is 100px by 75px and the background image is 50px by 25px, and the declaration
is background-position: 10% 10%, then the horizontal distance moved
will be 10px - 5px = 5px and the vertical distance moved will be 7.5px - 2.5px =
5px. The direction of movement depends on whether the background image is larger
or smaller than the padding box.
When the background image is smaller than the padding box, positive
percentages less than 100 in a background-position declaration cause the
background image to move towards the right and the bottom. With positive
percentages greater than 100, the bottom right of the background image may move
out of the padding box. The greater the size difference between the image and
the padding box, the greater is the chance that a part of the (or the entire)
background image moves out of the padding box.With negative percentages, the background image moves
towards the left and top.
When the background image is the same size as the padding box, it cannot be moved with background-position.
When the background image is larger than the padding box, positive
percentages less than 100 in a background-position declaration cause the
background image to move towards the left and top. With negative percentages
greater than 100, the top left of the background image may move out of the
padding box. The greater the size difference between the image and the padding
box, the greater the chance that a part of the (or the entire) background image
moves out of the padding box. With negative percentages, the background images
moves towards the bottom and right.
Internet Explorer 8 and below ignore the decimal portion of percentage
values. Therefore, in Internet Explorer 7 and below, background-position:
10.4% 25.9% is the same as background-position: 10% 25%.
This prevents precision positioning of the background image. To overcome this
limitation, the background image should be only slightly smaller or slightly
larger than its padding box.
Percentage-valued background-position declarations with the
declaration background-attachment:fixed cause the background image
to be positioned with respect to the viewport. However, the background image is
visible only in the border box of the element.
background-position:inherit
background-position is not an inherited property. However, the
background-position:inherit will cause an element to inherit its
parent element's background-position value.
Internet Explorer 6 and 7 ignore the inherit value.
The background Property
background is a shorthand property. That is, it allows specifying the values
of background-color, background-image,
background-repeat, background-attachment and
background-position in a single declaration.
Example 32: background: fixed url(image.gif) peachpuff 10% 10%
no-repeat
The order of the sub-values is not important. A background
declaration must have at least one sub-value. Those values that are not
specified are given the default value by the browser. The defalut values of the
properties of a background declaration are the same as the initial
values of each of the individual properties. They are: for
background-color, transparent; for background-image,
none; for background-repeat, repeat; for
background-attachment, scroll and for
background-position, 0% 0%.
Example 33: background: skyblue;
The above declaration is equivalent to background: skyblue scroll none
0% 0% repeat;
No comments:
Post a Comment