Learning Web Design Third Edition- P27 pptx

Part III: CSS for Presentation
246
Background Images
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 {
background-image: url(dot.gif);
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-image
background-repeat
background-position
background-attachment
background
A t A G l A n c e
The properties related to
background images are:

background-image
background-repeat
background-position
background-attachment
background
A t A G l A n c e
N ot e
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.
N ot e
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
Background Images
Chapter 13, Colors and Backgrounds
247
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.
background-image: url(cabbage_
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
Part III: CSS for Presentation
248
Background Images
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.
background-repeat
Values:

repeat
|
repeat-x
|
repeat-y
|
no-repeat
|

inherit

Default:

repeat
Applies to:
all elements
Inherits:
no
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);
background-repeat: repeat-x;
}
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.
div#titlepage {
padding: 1em;
background-color: #D4F8B9;
background-image: url(cabbage_B.gif);
background-repeat: repeat-x;
}
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.
Background Images
Chapter 13, Colors and Backgrounds
249
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.
Part III: CSS for Presentation
250
Background Images
background-position
Values:
length measurement | percentage |
left
|
center
|
right
|
top

|
bottom
|
inherit

Default:

0% 0%
(same as
left top
)
Applies to:
all elements
Inherits:
no
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
Background Images
Chapter 13, Colors and Backgrounds
251
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-repeat: no-repeat;
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.
div#titlepage {
padding: 1em;
background-color: #D4F8B9;
background-image: url(cabbage_C.gif);
background-repeat: no-repeat;
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-repeat: no-repeat;
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.
Part III: CSS for Presentation
252
Background Images
N ot e
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.
background-attachment
Values:

scroll
|
fixed
|
inherit

Default:

scroll
Applies to:
all elements
Inherits:
no
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.
Background Images
Chapter 13, Colors and Backgrounds
253
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;
background-image: url(cabbage_C.gif);
background-repeat: no-repeat;
background-position: center 85px;
background-attachment: fixed;
}
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;
background-color: #D4F8B9;
background-image: url(cabbage_D.gif);

background-repeat: no-repeat;
background-position: center 75px;
background-attachment: fixed;
}
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
Part III: CSS for Presentation
254
The Shorthand background Property
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
Applies to:
all elements
Inherits:
no
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-image: url(arlo.jpg);
background-repeat: no-repeat;
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.
Finally, External Style Sheets
Chapter 13, Colors and Backgrounds
255
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
N ot e
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.
N ot e
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.