| Table of Contents | Previous Next |
2.3 Background and borderThe background family of CSS style elements is used to set the background characteristics on your Web page. For example, you could apply some CSS background elements to highlight an area on a page, or just simply to enhance the contrasts of the display and the background. Another useful CSS element is border. The border properties set the display of borders around its associated CSS element. All these, together with the dimensioning and postioning CSS elements, give a variety of controls down to pixel level to help you design your pages. The dimensioning and positioning CSS elements will be discussed in more detail in section 2.4. Some frequently used background CSS elements are shown in Table 2.5.
Note that the background CSS element is the father of all the other background CSS elements, all of which share similar CSS properties for adding special background effects to your Web page. Some CSS elements like background-repeat, background-attachment, and background-position will not work unless the CSS element background-image is specified first. Let's now have a look at the background CSS elements. 2.3.1 Background color and imageThe CSS background element allows you to add a background color or image to your Web page. For example, you may like to use a dark color to set a background against light-colored paragraphs to create an effect of sidebars or offsetting text for emphasis. The CSS element <background-color> takes the general format
<b style="background-color:#rrggbb">
your body text here ...
</b>
The following example ex02-10.htm shows some simple background-color effects: Example: ex02-10.htm - Background Color 1: <?xml version="1.0" encoding="UTF-8"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 5: <head><title>Background Color ex02-10.htm</title></head> 6: 7: <body style="background:#f0fff0"> 8: 9: <div style="font-family:arial,times,serif; font-size:20pt; 10: font-weight:bold;text-align:center"> 11: Background Color <br />Demo</div><br /> 12: 13: <div style="background-color:#00ffff;font-family:'Comic Sans MS', 14: times; font-size:20pt;color:#ff0000"> 15: This text will appear in red in a small box with cyan 16: background on a larger honeydew background 17: </div><br /> 18: 19: </body> 20: </html> 20 Line 7 sets a general background color for the whole page. With the CSS background-color element, you can have additional control over the background color that is associated with this element. The division element in lines 1317 uses a different color (cyan) from that of the background (honeydew color) in order to emphasize a string of text. This page has the screen output shown in Fig. 2.11. Figure 2.11. ex02-10.htm
You can also use a small picture, a photograph, or a graphic design to form a background pattern. With the background-image CSS properties, your small picture is tiled repeatedly in the horizontal and/or vertical directions to form the image background. If carefully arranged, this type of background can have both an unusual and original effect. In Chapter 1 we have already discussed adding images to the background of your Web page. This is a very straightforward process with the CSS element. The code <body style="background-image:url (bg_image.gif)"> will repeatedly insert the image bg_image.gif into the body of the page to create a background picture. Note that once this element is specified, you can further modify the behavior of the background by using the related CSS elements such as background-repeat, background-attachment, and background-position. These CSS elements will be discussed in section 2.3.2. The following example shows how to create a background consisting of the image "Practical Web" logo:
Example: ex02-11.htm - Background Image
1: <?xml version="1.0" encoding="UTF-8"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title>Background Image ex02-11.htm</title></head>
6: <style type="text/css">
7: .txtSt {background-color:#000000;font-family:arial; color:ffffff;
8: font-size:30pt; font-weight:bold; text-align:center}
9: </style>
10:
11: <body style="background-image: url(logo_web.jpg);
12: background-repeat:repeat">
13:
14: <br /><br />
15: <div class="txtSt">We have an image background.
16: </div>
17:
18: </body>
19: </html>
In this example, the CSS element background-repeat:repeat tiles the image web_logo.jpg both horizontally and vertically to create the image background. If the background-repeat:repeat-x is set, then the image is tiled horizontally only and can be used to create a graphical edge effect for your Web page. The background-repeat element is always used in conjunction with the background-image element and modifies the way the background image is displayed. A screen display of this example is shown in Fig. 2.12. Figure 2.12. ex02-11.htm
More interesting examples of changing various background attributes with mouse-over (or rollover) controls can also be found in Chapter 6. 2.3.2 Positioning a background imageYou can further control the position at which a background image begins to tile on your Web page. This is all done by the CSS element background-position. It takes the general form
<body style="background-image:url (bg_image.gif)
background-position: x y">
where x y represents the position of the image. Note that with the IE4 and NS4 browsers, tiling only happens down and to the right. The Web page ex02-12.htm below shows an example with various backgrounds.
Example: ex02-12.htm - Positioning A Background Image
1: <?xml version="1.0" encoding="UTF-8"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title>Positioning a Background Image - ex02-12.htm</title></head>
6:
7: <style type="text/css">
8: .txtSt1 {font-family:arial; color:#ffff00;
9: font-size:20pt; font-weight:bold;text-indent:-50px}
10: .txtSt2 {font-family:'Comic Sans MS'; color:#000088;
11: font-size:20pt; font-weight:bold;text-indent:-50px}
12: .txtSt3 {font-family:Times New Roman; color:#dd8800;
13: font-size:20pt; font-weight:bold;text-indent:-50px}
14:
15: </style>
16:
17: <body style="background:#87ceeb;background-image: url(vstone01.gif);
18: background-repeat:repeat-y">
19:
20: <div style="font-family:arial;font-size:24pt;color:#8b0000;
21: font-weight:bold;text-align:center">Positioning A Background Image
22: <br /><br /></div>
23: <div class="txtSt1">
24: <img alt="pic" src="bullet1.gif" hspace=100 align=left>
25: The background in skyblue color<br /><br />
26: </div>
27:
28: <div class="txtSt2">
29: <img alt="pic" src="bullet1.gif" hspace=100 align=left>
30: An edge background<br /><br />
31: </div>
32:
33: <div class="txtSt3">
34: <img alt="pic" src="bullet1.gif" hspace=100 align=left>
35: You can attach a company logo here
36: <br /><br />
37: </div>
38: <img alt="pic" src="logo_web.jpg" width="180" height="90" align=right>
39:
40: </body>
41: </html>
In this example, the CSS background attribute background-repeat:repeat-y in lines 1718 tiles the background image vstone01.gif in a vertical direction repeatedly to create an image edge background. You can also add various images to your Web page to enhance the appearance of the page. A screen shot of example ex02-12.htm is shown in Fig. 2.13. Figure 2.13. ex02-12.htm
2.3.3 "Nailing" a background imageThe CSS style element background-attachment allows you to control whether the background image moves when the browser window is scrolled. Similar to the background-repeat element, the background-attachment CSS element only works when the background-image element is set. It takes the general format
<body style="background-image:url (bg_image.gif)
background-attachment: fixed">
If the background-attachment is set to fixed, then the background-image will be fixed with respect to the viewing area and therefore not affected by any scrolling action. This has the effect of "nailing" the background image in place and may be a useful function if, for instance, you want to create a watermark feature using your own logo. Example ex02-13.htm illustrates this action.
Example: ex02-13.htm - Fixing A Background Image Position
1: <?xml version="1.0" encoding="UTF-8"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title>Positioning a Background Image ex02-13.htm</title></head>
6:
7: <style type="text/css">
8: .txtSt1 {font-family:arial; color:#000000;
9: font-size:20pt; font-weight:bold}
10: .txtSt2 {font-family:'Comic Sans MS'; color:#000088;
11: font-size:20pt; font-weight:bold}
12: .txtSt3 {font-family:Times New Roman; color:#dd8800;
13: font-size:20pt; font-weight:bold}
14:
15: </style>
16:
17: <body style="background-image: url(title4.gif); background-position:center;
18: background-repeat:no-repeat;background-attachment:fixed">
19:
20: <div style="font-family:arial;font-size:24pt;color:#8b0000;
21: font-weight:bold;text-align:center">Fixing A Background Image
22: <br /><br /></div>
23: <div class="txtSt1">
24: The background-image is fixed<br /><br />
25: </div>
26:
27: <div class="txtSt2">
28: and therefore <br /><br />
29: </div>
30:
31: <div class="txtSt3">
32: will not be affected
33: <br /><br />
34: </div>
35:
36: <div class="txtSt1" style="font-size:10pt">
37: by any scrolling action<br /><br />
38: </div>
39:
40: <div class="txtSt2" style="font-size:25pt">
41: The default scroll attribute makes the background-image
43: scroll when the user scrolls the page <br /><br />
44: </div>
45:
46: </body>
47: </html>
In lines 1718, the background image title4.gif is fixed at the center of the page and is unaffected by any scrolling actions. If you set background-attachment:scroll, then the scroll attribute makes the background image scroll when the user scrolls the page. The screen output of this page is shown in Fig. 2.14. Figure 2.14. ex02-13.htm
2.3.4 Color, width, and style of element bordersOne of the most powerful CSS properties is positioning. This property gives you total, pixel-level control over the location of every element on your Web page. This CSS element will be discussed in more detail in section 2.4. The remainder of this section is devoted to a discussion of the CSS border element and its associated properties. The CSS border property sets the display of borders around the CSS element that it is associated with. Every border has three aspects: width, style, and color. These properties allow you to have full control as to how you want the borders to be displayed on the Web page. Some frequently used CSS border elements are shown in Table 2.6.
There are a total of nine different border styles defined in the CSS1 standard. However, only the support of the solid border style is required for CSS1 compliance. For example,
<div style="border-style:double border-color:red">
Double bordered texts</div>
will create a double-line red border around "Double bordered texts." The nine different border styles are demonstrated in the example ex02-14.htm.
Example: ex02-14.htm - Border With CSS
1: <?xml version="1.0" encoding="UTF-8"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title>Borders with Styles ex02-14.htm</title></head>
6: <style>
7: .bSt {font-family:'Comic Sans MS',times;font-size:12pt}
8: </style>
9:
10: <body style="font-family:arial;font-size:20pt;font-weight:bold">
11:
12: <div style="text-align:center;color:#880000;text-align:center">
13: Border Styles and Colors Demo Page</div><br />
14:
15: <div class="bSt" style="border-style:none;border-color:#000088">
16: The paragraph has no border style </div><br />
17:
18: <div class="bSt" style="border-style:double;border-color:#008800">
19: The paragraph has a DOUBLE border style </div><br />
20:
21: <div class="bSt" style="border-style:dashed;border-color:#ff0000">
22: The paragraph has a DASHED border style </div><br />
23:
24: <div class="bSt" style="border-style:dotted;border-color:#ffd700">
25: The paragraph has a DOTTED border style </div><br />
26:
27: <div class="bSt" style="border-style:inset;border-color:#fff4e1">
28: The paragraph has an INSET border style </div><br />
29:
30: <div class="bSt" style="border-style:outset;border-color:#ffa500">
31: The paragraph has an OUTSET border style </div><br />
32:
33: <div class="bSt" style="border-style:groove;border-color:#006400">
34: The paragraph has a GROOVE border style </div><br />
35:
36: <div class="bSt" style="border-style:ridge;border-color:#00ffff">
37: The paragraph has a RIDGE border style </div><br />
38:
39: <div class="bSt" style="border-style:solid;border-color:#0000ff">
40: The paragraph has a SOLID border style </div><br />
41:
42: </body>
43: </html>
In this example, the internal CSS style in lines 68 defines the display text properties. Lines 1540 define all nine different border-style attributes. The none attribute is the default style. Also the support of only the solid style is required for CSS1 compliance. As an example, the lines 3031
<div class="bSt" style="border-style:outset;border-color:#ffa500">
The paragraph has an OUTSET border style </div><br />
set an orange-colored outset border. The screen shot of example ex02-14.htm is shown in Fig. 2.15. Figure 2.15. ex02-14.htm
|
| Table of Contents | Previous Next |
