Learning Web Design Third Edition- P27 pptx

You can also apply a background image to any element in the document, not just the whole page.. Add a declaration to the body style rule that makes the image cabbage_A.jpg tile in the b

Trang 1

Background Images

CSS really beats (X)HTML hands-down when it comes to background

imag-es (but then, (X)HTML really shouldn’t have been dealing in background images in the first place) With CSS, you’re not stuck with a repeating tile pat-tern, and you can position a background image wherever you like You can also apply a background image to any element in the document, not just the whole page

In this section, we’ll look at the collection of properties used to place and push around background images, starting with the basic background-image

property

Adding a background image

The background-image property is used to add a background image to an ele-ment Its primary job is to provide the location of the image file.

background-image

Values: URL (location of image) | none | inherit

Default: none

Applies to: all elements Inherits: no

The value of background-image is a sort of url-holder that contains the URL

of the image The URL is relative to the (X)HTML document that the image

is going into, not the style sheet document (see related Tip)

These examples and Figure 13-14 show background images applied behind

a whole page (body) and a single blockquote element with padding and a border applied.

body { background-image: url(star.gif); } blockquote {

padding: 2em;

border: 4px dashed;}

Here you can see the default behavior of background-image The image starts

in the top, left-hand corner and tiles horizontally and vertically until the entire element is filled (although you’ll learn how to change that in a moment) Like background colors, tiling background images fill the area behind the content area, the extra padding space around the content, and extend to the outer edge of the border (if there is one)

If you provide both a background-color and a background-image to an ele-ment, the image will be placed on top of the color In fact, it is recommended that you do provide a backup color that is similar in hue, in the event the

image fails to download.

The properties related to

background images are:

background-repeat

background-position

background-attachment

background

A t A G l A n c e

The properties related to

background images are:

background-position

background

A t A G l A n c e

Note

The proper term for that “url-holder”

is a functional notation It is the same

syntax used to list decimal and

percent-age RGB values.

Note

The proper term for that “url-holder”

is a functional notation It is the same

syntax used to list decimal and

percent-age RGB values.

Providing site root relative URLs for

images ensures that the background

image can be found regardless of

location of the (X)HTML document

it’s going into The root directory is

indicated by a slash at the beginning

of the URL For example:

background-image:

url(/images/background.jpg)

t I P

Providing site root relative URLs for

images ensures that the background

image can be found regardless of

location of the (X)HTML document

it’s going into The root directory is

indicated by a slash at the beginning

of the URL For example:

background-image:

url(/images/background.jpg)

t I P

Trang 2

dot.gif (24 x 24 pixels) star.gif (100 x 96 pixels)

Figure 13-14 Examples of tiling background images added with the background-image

property.

Figure 13-15 The article with a simple

tiling background image.

exercise 13-2 |

Working with background images

In this exercise, we’re going to add and

manipulate tiling background images in

the Cabbages article from the last exercise

We’ll revisit this document several times

to give you a chance to try out each

background image property The images

provided for this exercise should be in

the same directory as the cabbage.html

document

Add a declaration to the body style rule

that makes the image cabbage_A.jpg tile

in the background of the page

A.jpg)

Easy, isn’t it? When you save and view the

page in the browser, it should look like

Figure 13-15 For extra credit, take the

image out of the page background and

put it in the div at the top of the page

Background Images

When working with background images, keep these guidelines and tips in mind:

Use a simple image that won’t interfere with the legibility of the text over it

Always provide a

background-color value that matches the

primary color of the background image If the background image fails to display, at least the overall design of the page will be similar This is particularly important if the text color would be illegible against the browser’s default white background

As usual for the Web, keep the file size of background images as small as possible



D e S I G n t I P

Trang 3

Background Tiling

As we saw in the last figure, images tile up and down, left and right when left to their own devices You can change this behavior with the background-repeat property.

Values: repeat | repeat-x | repeat-y | no-repeat | inherit

Default: repeat

If you want a background image to appear just once, use the no-repeat key-word value, like this.

body { background-image: url(star.gif);

background-repeat: no-repeat;

} You can also restrict the image to tiling only horizontally (repeat-x) or verti-cally (repeat-y) as shown in these examples.

body { background-image: url(star.gif);

background-repeat: repeat-x;

} body { background-image: url(star.gif);

background-repeat: repeat-y;

} Figure 13-16 shows examples of each of the keyword values Notice that in all the examples, the tiling begins in the top-left corner of the element (or browser window when an image is applied to the body element) But the background image doesn’t necessarily need to start there.

exercise 13-2 | (continued) Now let’s try some slightly more sophisticated tiling on the sample article page This time, we’ll remove that busy tile in the background of the whole page and add a more subtle pattern just within the “titlepage” div

Remove the background-image declaration in the body or div style rules

In the div#titlepage rule, add the image cabbage_B.gif and set it to repeat

horizontally only

div#titlepage { padding: 1em;

background-color: #D4F8B9;

background-image: url(cabbage_B.gif);

}

Save the file and look at it in the browser It should look like Figure 13-17 Try changing it to repeat vertically, then make it not repeat at all

1

2

3

exercise 13-2 | (continued) Now let’s try some slightly more sophisticated tiling on the sample article page This time, we’ll remove that busy tile in the background of the whole page and add a more subtle pattern just within the “titlepage” div

Remove the background-image declaration in the body or div style rules

In the div#titlepage rule, add the image cabbage_B.gif and set it to repeat

horizontally only

background-image: url(cabbage_B.gif);

}

Save the file and look at it in the browser It should look like Figure 13-17 Try changing it to repeat vertically, then make it not repeat at all

1

2

3

Trang 4

No repeat

Repeat-y

Repeat-x

Figure 13-16 Turning off automatic tiling with no-repeat (top), vertical-axis tiling with

repeat-y (middle), and horizontal-axis tiling with repeat-x (bottom).

Figure 13-17 Adding a horizontal tiling image to the div.

Background Position

The background-position property specifies the position of the origin image

in the background You can think of the origin image as the first image that

is placed in the background from which tiling images extend Here is the

property and its various values.

Trang 5

Default: 0% 0% (same as left top)

In general, you provide both horizontal and vertical values that describe where to place the origin image, but there are a variety of ways to do it Examples of each method are shown in Figure 13-18

Keyword positioning

The keyword values (left, center, right, top, bottom, and center) position the origin image relative to the edges of the element For example, left posi-tions the image all the way to the left edge of the background area.

Keywords are typically used in pairs, as in these examples:

{ background-position: left bottom; } { background-position: right center; }

If you provide only one keyword, the missing keyword is assumed to be center Thus, background-position: right has the same effect as the sec-ond example above.

Length measurements

You can also specify the position by its distance from the top-left corner

of the element using pixel measurements When providing length values, the horizontal measurement always goes first.

{ background-position: 200px 50px; }

Percentages

Percentage values are provided in horizontal/vertical pairs, with 0% 0% corresponding to the top-left corner and 100% 100% corresponding to the bottom-right corner It is important to note that the percentage value applies to both the canvas area and the image itself For example, the 100% value places the bottom-right corner of the image in the bottom-right cor-ner of the canvas As with keywords, if you only provide one percentage, the other is assumed to be 50% (centered)

{ background-position: 15% 100%; } Figure 13-18 shows the results of each of the background-position examples listed above with the background-repeat set to no-repeat for clarity It is pos-sible to position the origin image and let it tile from there, in both directions

or just horizontally or vertically When the image tiles, the position of the initial image won’t be obvious, but you can use background-position to make

a tile pattern start at a point other than the left edge of the image.

To ensure best performance in

modern browsers, always supply the

horizontal measurement first for all

value types

c S S t I P

To ensure best performance in

modern browsers, always supply the

horizontal measurement first for all

value types

c S S t I P

background-position: 15% 100%;

background-position: top left;

background-position: right center;

background-position: 5opx 50px

Figure 13-18

Positioning a non-repeating background image

background-position: 15% 100%;

background-position: top left;

background-position: right center;

background-position: 5opx 50px

Figure 13-18

Positioning a non-repeating background image

Trang 6

Put a non-repeating image in the top, left corner of the

page Use the image named cabbage_C_topleft.gif I’ll give

you the rule for this first one Then try putting cabbage_C_

topright.gif in the top, right corner.

body {

margin-left: 10%;

margin-right: 10%;

background-color: #BBE09F;

background-image: url(cabbage_C_topleft.gif);

background-position: left top;

}

Change the above rule to place the

image cabbage_C_rightside.gif on

the right edge of the page and 100

pixels down from the top (this is the

screenshot shown in Figure 13-19)

The CSS Recommendation allows

combined value types (for example,

background-position: right 100px)

Just make sure you always put the

horizontal value first Older browsers

may have a problem with mixed

values, so be sure to test this on

your target browsers You can try the

same thing on the left side of the

page using cabbage_C_leftside.gif

Experiment with different vertical

values

Change that same rule to place the

image cabbage_C.gif in the center

of the body element Note that it will

be centered vertically in the height of

the whole body element, not in the

browser window, so you’ll have to

scroll down to see it

Now let’s get fancy Change the

position of cabbage_C.gif to center

85px to center it near the top of the

page Now, add the same image

to the shaded div at the top of the

page, setting its position to center

75px

1

2

3

4

background-image: url(cabbage_C.gif);

background-position: center 75px; }

The images may not match up exactly, but with this image, it’s difficult to tell Try scrolling the page, and pay attention to what happens to the background images We’ll play with this concept more in the next installment of Exercise 13-2

exercise 13-2 | (continued)

You guessed it we’re going to have fun with the position of the background image in the cabbage article (are you hungry for

sauerkraut yet?) For this exercise, I’ve prepared several variations on the cabbage illustration that will look nice when tucked along

various edges of the page (see Figure 13-19) All of these GIF images are transparent, so when you use them as background images, the background color will show through I’ll give you a few things to try, but feel free to experiment with different placements and

types of position values on your own

cabbage_C.gif

cabbage_C_topleft.gif

cabbage_C_topright.gif

cabbage_C_leftside.gif

cabbage_C_rightside.gif

background-image: url (cabbage_C_rightside.gif);

background-position: right 120px;

Figure 13-19 The collection of background images designed to be positioned in various places in the document, as well as an

example of the image cabbage_C_rightside.gif positioned on the right edge of the document.

Trang 7

Notice in Figure 13-18 that when an origin image is placed in the corner of an ele-ment, it is placed inside the border Only repeated images extend under the border to its outer edge.

Background attachment

In the previous exercise, I asked you to scroll the page and watch what hap-pens to the background image As expected, it scrolls along with the docu-ment and off the top of the browser window, which is its default behavior However, you can use the background-attachment property to free the back-ground from the content and allow it to stay fixed in one position while the rest of the content scrolls.

Values: scroll | fixed | inherit

Default: scroll

With the background-attachment property, you have the choice of whether the background image scrolls or is fixed When an image is fixed, it stays in the same position relative to the viewing area of the browser (as opposed to being relative to the element it fills) You’ll see what I mean in a minute.

In the following example, a large, non-tiling image is placed in the background

of the whole document (the body element) By default, when the document scrolls, the image scrolls too, moving up and off the page, as shown in Figure 13-20 However, if you set the value of background-attachment to fixed, it stays where it is initially placed, and the text scrolls up over it.

body { background-image: url(images/bigstar.gif);

background-repeat: no-repeat;

background-position: center 300px;

background-attachment: fixed; } You can fix the position of a background image for any element, not just body, but unfortunately, it won’t work for users with Internet Explorer 6 and earlier for Windows Fixed background images in non-body elements is supported

in the latest IE7 release, thankfully.

Trang 8

background-attachment: fixed;

When background-attachment is set to “fixed,” the image stays in its position relative to the browser viewing area and does not scroll with the content

A large non-repeating background image in the body

of the document

background-attachment: scroll;

By default, the background image is attached to the body element and scrolls off the page when the page content scrolls

Figure 13-20 Preventing the background image from scrolling with the

background-attachment property.

exercise 13-2 | (continued)

When we last left the cabbage article, we had applied the same background

image to the body and div elements We’ll leave it just like that, but we’ll use the

background-attachment property to fix the image in the background of the page

body {margin-left: 10%;

margin-right: 10%;

background-color: #BBE09F;

}

Save the document, open it in the browser, and now try scrolling The background

image stays put in the viewing area of the browser

Now for the pièce de résistance—make the background image in the div fixed as

well You can use the cabbage_C.gif image or change it to cabbage_D.gif, which is a

little lighter

div#titlepage {

padding: 1em;

}

Save the file and reload it in the browser window Now look at what happens when

you scroll the page Windows users, you’re going to need a browser other than

Internet Explorer 6 (or earlier) to see the effect (I recommend downloading the

Firefox browser at www.mozilla.com/firefox/.)

Eric Meyer provides a more in-depth discussion of fixed background images at www.meyerweb.com/

eric/css/edge/complexspiral/glassy html

R e A D m O R e

Eric Meyer provides a more in-depth discussion of fixed background images at www.meyerweb.com/

eric/css/edge/complexspiral/glassy html

R e A D m O R e

Trang 9

The Shorthand background Property

You can use the handy background property to specify all of your background styles in one declaration.

background

Values:

background-color background-image background-repeat background-attachment background-position | inherit

Default: see indiviual properties

As for the shorthand font property, the value of the background property is a list of values that would be provided for the individual background proper-ties listed above For example, this one background rule:

body { background: black url(arlo.jpg) no-repeat right top fixed; } replaces this rule with five separate declarations:

body { background-color: black;

background-position: right top;

background-attachment: fixed;

} All of the property values for background are optional and may appear in any order The only restriction is that when providing the coordinates for the

background-position property, the horizontal value must appear first, imme-diately followed by the vertical value Be aware that if a value is omitted, it will be reset to its default (see Watch Out for Overrides ).

Finally, External Style Sheets

Back in Chapter 11, Cascading Style Sheets Orientation , I told you that there are three ways to connect style sheets to (X)HTML markup: inline with the

style attribute, embedded with the style element, and as an external .css

document linked to or imported into the document In this section, we finally get to that third option.

External style sheets are by far the most powerful way to use CSS, because you can make style changes across an entire site simply by editing a single style sheet document That is the advantage to having all the style informa-tion in one place, and not mixed in with the document source.

First, a little bit about the style sheet document itself An external style sheet

is a plain-text document with at least one style sheet rule It may not include

any (X)HTML tags (there’s no reason to, anyway) It may contain comments, but they must use the CSS comment syntax that you’ve seen already:

/* This is the end of the section */

Watch Out for

Overrides

The background property is efficient,

but use it carefully Because it is a

shorthand property, when you omit

a value, that property will be reset

with its default Be careful that you

do not accidentally override style

rules earlier in the style sheet with a

later shorthand rule that reverts your

settings to the defaults

In this example, the background

image dots.gif will not be applied

to h3 elements because by omitting

the value for background-image, it

essentially set that value to none

h1, h2, h3 { background: red

url(dots.gif) repeat-x;}

h3 {background: green;}

To override particular properties, use

the specific background property

you intend to change For example, if

the intent in the above example was

to change just the background color

of h3 elements, the

background-color property would be a better

choice

When using this or any shorthand

property, pay attention to related

rules earlier in the style sheet, or be

sure that every property is specified

Watch Out for

Overrides

The background property is efficient,

but use it carefully Because it is a

shorthand property, when you omit

a value, that property will be reset

with its default Be careful that you

do not accidentally override style

rules earlier in the style sheet with a

later shorthand rule that reverts your

settings to the defaults

In this example, the background

image dots.gif will not be applied

to h3 elements because by omitting

the value for background-image, it

essentially set that value to none

h1, h2, h3 { background: red

url(dots.gif) repeat-x;}

h3 {background: green;}

To override particular properties, use

the specific background property

you intend to change For example, if

the intent in the above example was

to change just the background color

of h3 elements, the

background-color property would be a better

choice

When using this or any shorthand

property, pay attention to related

rules earlier in the style sheet, or be

sure that every property is specified

exercise 13-2 |

(continued)

This one is easy Replace all of the

background-related declarations

in the body of the cabbage article

with a single background property

declaration

body {

margin-left: 10%;

margin-right: 10%;

background: #BBE09F

url(cabbage_C.gif) no-repeat

center 85px fixed;

}

Do the same for the div element,

and you’re done

exercise 13-2 |

(continued)

This one is easy Replace all of the

background-related declarations

in the body of the cabbage article

with a single background property

declaration

body {

margin-left: 10%;

margin-right: 10%;

background: #BBE09F

url(cabbage_C.gif) no-repeat

center 85px fixed;

}

Do the same for the div element,

and you’re done

Trang 10

The style sheet should be named with the .css suffix (there are some

excep-tions to this rule, but you’re unlikely to encounter them as a beginner) Figure

13-21 shows how a short style sheet document looks in my text editor.

Figure 13-21 External style sheets contain only CSS rules and comments in a plain text

document.

There are two ways to refer to an external style sheet from within the

(X)HTML document: the link element and an @import rule Let’s look at

both of these attachment methods.

Using the link Element

The best-supported method is to create a link to the .css document using the

link element in the head of the document, as shown here:

<head>

<link rel="stylesheet" href="/path/stylesheet.css" type="text/css" />

<title>Titles are required.</title>

</head>

You need to include three attributes in the link element:

rel="stylesheet"

Defines the linked document’s relation to the current document The

value of the rel attribute is always stylesheet when linking to a style

sheet.

href="url"

Provides the location of the .css file.

Design with Embedded Styles;

Finish with an External Style Sheet

It is common web development practice to use an embedded style sheet while you are designing the page because it keeps everything

in one place, and your changes will show instantly when you reload the page in the browser But once the design is all set, the style rules are then cut and pasted into an external

.css document so they can be linked

or imported to multiple documents

on the site

P R O D U c t I O n t I P Design with Embedded Styles;

Finish with an External Style Sheet

It is common web development practice to use an embedded style sheet while you are designing the page because it keeps everything

in one place, and your changes will show instantly when you reload the page in the browser But once the design is all set, the style rules are then cut and pasted into an external

.css document so they can be linked

or imported to multiple documents

on the site

P R O D U c t I O n t I P

Note

The link element is empty, so you need

to terminate it with a trailing slash

in XHTML documents, as shown in this example Omit the trailing slash in HTML documents.

Note

The link element is empty, so you need

to terminate it with a trailing slash

in XHTML documents, as shown in this example Omit the trailing slash in HTML documents.

Định dạng
Số trang	10
Dung lượng	492,2 KB