Monday, March 22, 2010

The float Property

The float property is used to specify whether an element is floated or not and the direction (left or right) that it is floated. The float property can be applied to any element. It is not an inherited property. It can take the values left, right, none, and inherit. Its initial value is none.

A floated element does not affect the positioning of other block elements. However, inline boxes are shortened to make room for the margin box of a floted element.

Margins on floated elements never collapse. How a floated element behaves is described in the W3C specification of floated elements. The description consists of nine rules.

Rule 1 states that the left outer edge (outer edge of the left margin) of a left-floating box may not be to the left of the left edge (outer edge of the padding) of its containing block. An analogous rule holds for right-floating elements.

What this means is that the outer edge of the left margin of a left-floated element will be aligned with the inner edge of the left padding of the containing block. Similarly, the outer edge of the right margin of a right-floated element will be aligned with the inner edge of the right padding of the containing block.

Example 1: <p style="font-size:35px;font-family:'Times New Roman';padding:10px;border:dashed 10px steelblue"><span>the</span> five boxin<img src="image4.png" alt="image 4" style="float:left;margin:5px;padding:10px;border:solid 5px slategray; background-color:palegreen">g wizards jump quickly, the quick brown fox jumps over the lazy dog</p>

In the above example, the gap between the left border outer edge of the image and left border inner edge of the <p> is 15px. This is because the left margin of the image is 5px and the left padding of the <p> is 10px and, after the image is aligned according to the rule, the margins are next to each other. Internet Explorer 6 and 7 render the image in the second line of the <p>. This is a bug.

Rule 2 states that if the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge (the outer edge of the left margin) of the current box must be to the right of the right outer edge (the outer edge of the right margin) of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.

What this means is that the outer edge of the margin of a left-floated element will be aligned to the outer margin edge of an earlier-occuring left-floated element. If there is insufficient space for the later-occuring floated element's box, it's top margin's outer edge will be aligned to the earlier-occuring left-floated element's bottom margin's outer edge. Right-floated elements are handled in a similar way, but aligned to the right.

Therefore, elements that are floated to the same side will not overlap each other.

Example 2: <p style="font-size:35px;font-family:'Times New Roman';padding:10px;border:dashed 10px steelblue"><span>the</span> five boxin<img src="image3.png" alt="image 3" style="padding:10px;border:solid 5px slategray; background-color:palegreen;margin:5px;float:left">g w<img src="image3.png" alt="image 3" style="padding:10px;border:solid 5px slategray; background-color:palegreen;margin:5px;float:left">izards jump quickly, the quick brown fox jumps over the lazy dog</p>

In the above example, the second left-floated image is to the right of the first left-floated image. The margin between them is 10px (5px + 5px). Internet Explorer 6 and 7 render the image in the second line of the <p>. This is a bug.

Example 3: <p style="font-size:35px;font-family:'Times New Roman';float:left">the quick brown fox jumps over the lazy dog</p> <p class="test" style="float:left">the quick brown fox jumps over the lazy dog</p>

In the above example, there is insufficient space to render the second floated <p> next to the first floated <p>. Therefore it is rendered below it.

Rule 3 states that the right outer edge of a left-floating box may not be to the right of the left outer edge of any right-floating box that is to the right of it. Analogous rules hold for right-floating elements.

Therefore, elements that are floated to opposite sides will never overlap each other.

What this means is that the outer edge of the right margin of a left floated element will be next to the outer edge of the left margin of a right floated element when there is just sufficient horizontal space for the floated elements. If there is extra space, it will appear between the margins of the two floated elements. When there is insufficient space, the second floated element's margin box will be rendered just below the first floated element's margin box.

Example 4: <p style="font-size:35px;font-family:'Times New Roman';padding:10px;border:dashed 10px steelblue"><img src="image4.png" alt="image 4" style="float:right;padding:10px;border:solid 5px saddlebrown; background-color:bisque;margin:5px"><img src="image4.png" alt="image 4" style="float:left;padding:10px;border:solid 5px yellowgreen; background-color:darkseagreen;margin:5px"></p>

In the above example, the space available in the <p> depends on the width of the viewport. The first picture shows how the floated images are positioned when there is sufficient space in the <p> for each image's margin box. The second picture shows how the floated images are positioned when there is insufficient space in the <p> — the second floated image is rendered below the first floated image.

Rule 4 states that a floating box's outer top may not be higher than the top of its containing block. When the float occurs between two collapsing margins, the float is positioned as if it had an otherwise empty anonymous block parent taking part in the flow.

What this means is that the outer edge of the top margin of a floated element cannot be higher than the inner edge of the top margin of its containing block. However, if the preceding element has a bottom margin and the succeeding element has a top margin, these margins will collapse because they will be adjoining to each other. In such a case, the floated element will behave as if it had another block level parent.

Since the margins of inline elements never collapse, the second part of Rule 4 does not apply to inline elements.

Example 5: <p style="font-size:35px;font-family:'Times New Roman';margin:5px;padding:0">the quick brown fox jumps over the lazy dog.</p> <p style="font-size:35px;font-family:'Times New Roman';float:left;margin:5px;padding:0;background: none peru"> the five</p> <p style="font-size:35px;font-family:'Times New Roman';margin:5px;padding:0"><span>the quick brown fox jumps</span> over the lazy dog.</p>

Rule 5 states that the outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.

Example 6: <p style="font-size:35px;font-family:'Times New Roman';width:160px;height: 200px;padding:10px;border:dashed 10px steelblue"><img src="image3.png" alt="image 3" style="float:right;vertical-align:bottom;padding:10px;border:solid 5px slategray; background-color:palegreen;margin:5px"><img src="image3.png" alt="image 3" style="float:left;vertical-align:bottom;padding:10px;border:solid 5px palevioletred; background-color:darkorchid;margin:5px"></p>

In the above example, because there is insufficient horizontal space, the second float is rendered below the first, even though the second float appears at the left. This demonstrates Rule 5.

Example 7: <p style="font-size:35px;font-family:'Times New Roman';width:160px;height:190px"><img src="image3.png" alt="50x50 image" style="float:left;padding:10px;background-color:orangered"> <img src="image4.png" alt="100x100 image" style="float:left;padding:5px;background-color:aquamarine"> <img src="image3.png" alt="50x50 image" style="float:left"></p>

In the above example, the third image's outer top is in line with the margin box of the second floated image even though there is enough place for it next to the first image. This is in accordance with Rule 5.

Rule 6: The outer top of an element's floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document.

Another way of putting it is: The outer edge of the margin of a floated element must be at the same height or lower than the inner edge of the padding of any line box that has content whose source code appears earlier than the floated element's.

Content whose source code appears earlier than a particular element's source code is usually on the same line as the element. However, when there is insufficient space for an element, it is rendered on the next line. In this case, if the element is floated, it will float on the next line.

Rule 7: A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block's right edge. An analogous rule holds for right-floating elements.

Example 8: <p style="font-size:35px;font-family:'Times New Roman';width:100px;height:100px"><img src="image3.png" alt="50x50 image" style="float:left;margin:5px;"><img src="image3.png" alt="50x50 image" style="float:left;margin:5px;"></p>

Rule 8: A floating box must be placed as high as possible.

Rule 8 specifies that floated elements that have been positioned according to Rule 2, Rule 5 and Rule 6 have to be positioned as high as possible. Rule 2 specifies two possible positions for a floated box — one lower than the other, Rule 5 specifies that the float be positioned at the same height or lower than a particular margin and Rule 6 specifies that a float must be positioned at the same height or lower than a particular padding. Therefore, Rule 8 specifies that the highest possible position must be chosen.

Rule 9: A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.

Rule 1, Rule 2, and Rule 3 specify the specify the limit of how much to the right or left a floated element can be positioned. Rule 9 specifies that elements positioned according to those rules must be positoned as left as possible (for left floated elements) or as right as possible (for right floated elements) while not going beyond the limits specified.

Also, Rule 9 specifies that a floated element must be positioned higher but less to the left or right instead of lower but more to the left or right if those are the two available positions.

Example 9: <p style="font-size:35px;font-family:'Times New Roman'"><img src="image3.png" alt="50x50 image" style="float:left;margin:5px;"><img src="image3.png" alt="50x50 image" style="float:left;margin:5px;"></p>

In the above example, the second floated image can also be placed below the first without violating rules 1 to 8. But because of rule 9, it is placed next to the first floated image.

Nested Floats

A floated element can contain floated descendants. A floated element will expand its height and width to accomodate a floated descendant's height. Internet Explorer 6 and 7 do not obey this rule when rendering a floated element that contains floated descendants.

Negative Margins

Floated elements with negative margins obey all of the float rules. However, the outer edge of the margin box of a floated element with negative margins will be within the padding box of the element.

Floated Elements With Negative Margins Overlapping Other Elements

When a floated element has a negative top margin, it may overlap a preceding element. In such a case, the floated element's text and the preceding element's text overlap and the background color of the floated element appears behind the text.

Example 10: <p style="font-size:35px;font-family:'Times New Roman'" >the quick brown fox jumps over the lazy dog</p><p style="margin-top:-40px;float:left;background:none cornsilk;font-size:35px;font-family:'Times New Roman'">the five boxing wizards jump quickly</p>

When a floated element overlaps an element that appears after it in the source, the inline content of that element moves away so as not to overlap the floated content. The background color of the floated element appears behind the text.

Example 11: <p style="float:left;background:none cornsilk;font-size:35px;font-family:'Times New Roman'">the quick</p> <p style="font-size:35px;font-family:'Times New Roman'">the five boxing wizards jump quickly</p>

According to the CSS 2.1 specification, when a float overlaps inline boxes (using negative margins), the inline boxes are rendered on top of the floated element's box.

Example 12: <p style="width:580px;font-size:35px;font-family:'Times New Roman'">the quick brown fox jumps <span style="background:none blueviolet">over the lazy</span> dog. the five boxing <span style="background:none gold">wizards.</span> <span style="float:right;margin-top:-20px;margin-left:-50px">jump quickly</span></p>

A floated element's box is rendered on top of block boxes that it overlaps. However, if the contents of the block box are inline boxes, then the inline boxes will be rendered on top of the floated element's box.

float:none

Since none is the initial value of float, the declaration float:none is only useful to override another float declaration that was applied to an element.

float:inherit

float is not an inherited property. However, using the float:inherit declaration, an element can be made to inherit its parent element's float value.

Internet Explorer 6 and Internet Explorer 7 ignore the float:inherit declaration.

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;