Web Design All-in-One For Dummies, 2nd Edition by Sue Jenkins

Author:Sue Jenkins
Language: eng
Format: epub
Publisher: Wiley Publishing
Published: 2012-12-11T16:00:00+00:00

Figure 4-4: Use CSS to control how images repeat within a container. A. repeat, B. repeat-x, C. repeat-y, D. no-repeat.

Here is an explanation of the different background attachment styles:

scroll: This is the default option for how the background image is attached to the page, which works the same whether the attribute is specified or unspecified in the CSS. With this option, the background image scrolls along with any text and other objects on the page.

fixed: The fixed attribute keeps the background image fixed to the browser window while text and other objects on the page scroll past it.

inherit: When you specify this option, the background image inherits the attachment rule, whether scroll or fixed, from its parent container, as with a table cell inside a table.

background-position (X): Set the horizontal background-position attribute to control where in the browser window the background image displays and repeats. Choose left, center, or right or type any value in px (pixels), pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), em (ems), ex (exs), or % (percentage).

p {

background-image: url(images/recycle.gif);

background-repeat: repeat-x;

background-position: left;

}

background-position (Y): Set the vertical background-position attribute to control where in the browser window the background image displays and repeats. Choose top, center, or bottom or type any value in px (pixels), pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), em (ems), ex (exs), or % (percentage).

p {

background-image: url(images/gogreen.png);

background-repeat: repeat-y;

background-position: center;

}

When both the horizontal and vertical background positions need to be specified in the CSS, list them together separated by a space:

p {

background-image: url(images/earthsafe.jpg);

background-repeat: repeat-x;

background-position: left center;

}

The horizontal position always goes before the vertical position when the two are combined. If this order is not followed, the element may not render properly, resulting in unexpected display issues when viewed in different browsers.

The block properties

Block properties control the alignment and spacing of objects on a page through their tags and attributes. Blocks, which you are introduced to in the first section of this chapter, include text, content inside <div> tags (both with and without positions specified), tags using the display:block style, and images or paragraphs set with absolute or relative positions.

word-spacing: To adjust the spacing between individual words, use any positive or negative number in px (pixels), pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), em (ems), ex (exs), or % (percentage), such as word-spacing: 2px;.

p { word-spacing: 2px; }

letter-spacing: With this attribute, you can uniformly increase or decrease the space between characters by specifying a positive or negative value in px (pixels), pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), em (ems), ex (exs), or % (percentage), such as letter-spacing:1em;. Note that changing the letter-spacing attribute overrides any preexisting text justification.

p { letter-spacing: 1.5em; }

vertical-align: You can vertically align text along the text baseline, sub (subscript), super (superscript), top, text-top, middle, bottom, and text-bottom, or by any value, positive or negative, in px (pixels), pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), em (ems), ex (exs), or % (percentage), such as vertical-align: top;.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.