Saturday, March 13, 2010

The Background Properties

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>

(Image taken from Google Chrome)

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: