ppt ch08
DESCRIPTION
TRANSCRIPT
![Page 1: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/1.jpg)
Web Design Principles5th Edition
Chapter EightIncorporating Graphics and Color
![Page 2: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/2.jpg)
Objectives
When you complete this chapter, you will be able to:
• Understand graphic file formats
• Choose a graphics tool
• Use the <img> element
• Control image properties with CSS
• Understand computer color basics
• Control color properties with CSS
• Control background images with CSS
2Web Design Principles 5th Ed.
![Page 3: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/3.jpg)
Understanding Graphic File Formats
![Page 4: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/4.jpg)
Understanding Graphic File Formats
• You can currently use only three image file formats on the Web: GIF, JPG, and PNG– A newer format, SVG, has had limited success
• These formats all compress images to create smaller files– Knowing which file format to use for which type of
image is important
• If you choose the wrong file type, your image won’t compress or display properly
4Web Design Principles 5th Ed.
![Page 5: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/5.jpg)
5
GIF
• GIF uses a lossless compression technique, meaning that no color information is discarded when the image is compressed
• The color depth of GIF is 8-bit, allowing a palette of no more than 256 colors
• GIF excels at compressing and displaying flat color areas, making it the logical choice for line art and color graphics
Web Design Principles 5th Ed.
![Page 6: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/6.jpg)
GIF Transparency
• With GIF files, you can choose any one color in an image to appear as transparent in the browser
• The background color or pattern will show through the areas that you have designated as transparent
• Using transparent areas allows you to create graphics that appear to have an irregular outside shape, rather than being bounded by a rectangle
Web Design Principles 5th Ed. 6
![Page 7: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/7.jpg)
Web Design Principles 5th Ed. 7
![Page 8: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/8.jpg)
GIF Animation
• The GIF format lets you store multiple images and timing information about the images in a single file
• This means that you can build animations consisting of multiple static images that play continuously, creating the illusion of motion
Web Design Principles 5th Ed. 8
![Page 9: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/9.jpg)
Web Design Principles 5th Ed. 9
![Page 10: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/10.jpg)
JPG
• JPG is best for photographs or continuous tone images
• JPGs are 24-bit RGB images that allow millions of colors
• JPGs use a “lossy” compression routine especially designed for photographic images– When the image is compressed, some color
information is discarded, resulting in a loss of quality from the original image
Web Design Principles 5th Ed. 10
![Page 11: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/11.jpg)
JPG
• When you create the JPG file, you can also manually balance the amount of compression versus the resulting image quality
• The higher the compression, the lower the image quality– You can play with this setting to create files that
are as small as possible but still look good
• Many photos can sustain quite a bit of compression while still maintaining image integrity
Web Design Principles 5th Ed. 11
![Page 12: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/12.jpg)
Web Design Principles 5th Ed. 12
![Page 13: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/13.jpg)
PNG
• A royalty-free file format that is intended to replace GIF
• This lossless format compresses bit images to smaller file sizes than GIF
• PNG supports transparency and interlacing but not animation
Web Design Principles 5th Ed. 13
![Page 14: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/14.jpg)
SVG
• A language for describing two-dimensional graphics using XML
• SVG graphics are scalable to different display resolutions and are printable
• Most new browsers now support SVG
Web Design Principles 5th Ed. 14
![Page 15: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/15.jpg)
Using Interlacing & Progressive Display
• These are the gradual display of a graphic in a series of passes as the data arrives in the browser
• Most Web-capable graphics editors let you save images in an interlaced or progressive format
• You can choose this display option when creating GIF, PNG, and JPG files
• GIF and PNG files use interlacing, while JPGs use progression
Web Design Principles 5th Ed. 15
![Page 16: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/16.jpg)
Web Design Principles 5th Ed. 16
![Page 17: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/17.jpg)
Where You Can Find Images
• Stock photo collections• Digital cameras• Scanner• Public-domain Web sites• Clip art• Create your own• Remember to respect copyright laws!
Web Design Principles 5th Ed. 17
![Page 18: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/18.jpg)
Choosing the Right Format
• GIF: the everyday file format for all types of simple colored graphics and line art– GIF’s transparency feature lets you seamlessly
integrate graphics into your Web site
• JPG: use JPG for all 24-bit full color photographic images, as well as more complicated graphics that contain color gradients, shadows, and feathering
Web Design Principles 5th Ed. 18
![Page 19: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/19.jpg)
Choosing the Right Format
• PNG: you can use PNG as a substitute for GIF
• SVG: offers many advantages, wait for complete browser support
Web Design Principles 5th Ed. 19
![Page 20: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/20.jpg)
Choosing a Graphics Tool
![Page 21: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/21.jpg)
Choosing a Graphics Tool
• You use graphics software to create or manipulate graphics
• Look for a tool that meets your needs and will not take a long time to learn
• Shareware and freeware software are available
Web Design Principles 5th Ed. 21
![Page 22: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/22.jpg)
Using the Image Element
![Page 23: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/23.jpg)
Using the Image Element
• <img> is a replaced element• <img> is an empty element, so never use a
closing tag with it
Web Design Principles 5th Ed. 23
![Page 24: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/24.jpg)
Using the Image Element
• Normal image alignment is to the baseline of the text
• Images that are within a line of text must have spaces on both sides, or the text will touch the image
Web Design Principles 5th Ed. 24
![Page 25: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/25.jpg)
<img> Element Attributes
Web Design Principles 5th Ed. 25
![Page 26: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/26.jpg)
Replacing Element Attributes with Style Sheet Properties
Web Design Principles 5th Ed. 26
![Page 27: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/27.jpg)
Specifying alt and title Attribute Text
• The alt text is displayed if the image does not appear, providing a description of the image
• The title text appears as a pop-up when the user places the cursor over the image
Web Design Principles 5th Ed. 27
![Page 28: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/28.jpg)
Web Design Principles 5th Ed. 28
![Page 29: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/29.jpg)
<img src="balloons_sm.jpg" width="200" height="267" alt="Hot Air Balloon image" title="Balloons at the Great Falls Festival in Lewiston, Maine"/>
Web Design Principles 5th Ed. 29
![Page 30: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/30.jpg)
Specifying Image Width and Height
• Every <img> element on your site should contain width and height attributes
• These attributes provide important information to the browser by specifying the amount of space to reserve for the image
• This information dramatically affects the way your pages download to the user, especially at slower connection speeds
Web Design Principles 5th Ed. 30
![Page 31: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/31.jpg)
Web Design Principles 5th Ed. 31
![Page 32: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/32.jpg)
Web Design Principles 5th Ed. 32
![Page 33: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/33.jpg)
Sizing Graphics for the Page
• Size graphics appropriately
• Keep their dimensions small and appropriate to the size of the page
Web Design Principles 5th Ed. 33
![Page 34: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/34.jpg)
Web Design Principles 5th Ed. 34
![Page 35: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/35.jpg)
Controlling Image Properties with CSS
• Removing the hypertext border• Aligning text and images• Floating images• Adding white space around images
Web Design Principles 5th Ed. 35
![Page 36: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/36.jpg)
Removing the Hypertext Border from an Image
• When you create a hypertext image, the browser’s default behavior is to display the hypertext border around the image
• This border is often unnecessary as users often use their mouse to point to each image to see if the hypertext cursor displays
<img src="balloon.jpg" width="100" height="100" alt="balloon” style="border: none" />
Web Design Principles 5th Ed. 36
![Page 37: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/37.jpg)
Web Design Principles 5th Ed. 37
![Page 38: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/38.jpg)
Aligning Text and Images
• You can align text along an image border using the align attribute
• Text and image alignment defaults to bottom alignment, which means the bottom of the text aligns with the bottom edge of the image
• Valid values are: top, middle, bottom, left, right
Web Design Principles 5th Ed. 38
![Page 39: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/39.jpg)
Web Design Principles 5th Ed. 39
![Page 40: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/40.jpg)
Floating Images
• The float property can be used to float an image to the left or right of text
• The following style rules create two classes of <img> elements, one of which floats to the left of text; the other floats to the right
img.left {float:left;}
img.right {float:right;}
Web Design Principles 5th Ed. 40
![Page 41: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/41.jpg)
Web Design Principles 5th Ed. 41
![Page 42: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/42.jpg)
Adding White Space around Images
• Add white space around your images to reduce clutter and improve readability
• Use the CSS margin property to increase the white space around an image
Web Design Principles 5th Ed. 42
![Page 43: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/43.jpg)
Web Design Principles 5th Ed. 43
![Page 44: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/44.jpg)
Understanding Computer Color Basics
• Monitors display colors by mixing three basic colors of light: red, green, and blue– Intensity ranges from:
• 0% (complete absence of color) to 100% (complete presence of color)
• Color depth– Amount of data used to create the color
• bit (256 colors), 16-bit, and 24-bit (16.7M colors)
Web Design Principles 5th Ed. 44
![Page 45: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/45.jpg)
Color Depth
• The amount of data used to create color on a display is called the color depth
• If your users have a 24-bit color display, they can appreciate the full-color depth of your images
• If your monitor doesn’t support the full color depth of an image, the browser must resort to mixing colors that attempt to match the original colors in the image
Web Design Principles 5th Ed. 45
![Page 46: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/46.jpg)
Web Design Principles 5th Ed. 46
![Page 47: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/47.jpg)
Specifying CSS Color Values
• Color names
• RGB color values
• Hexadecimal color values
Web Design Principles 5th Ed. 47
![Page 48: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/48.jpg)
Using Color Names
• Sets color values using common color names– Blue, gray, red, etc.
• Limited to small range of colors
• Not a very specific representation of color
Web Design Principles 5th Ed. 48
![Page 49: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/49.jpg)
Web Design Principles 5th Ed. 49
![Page 50: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/50.jpg)
Using RGB Color Values
• Numerical values that specify the blending of the red, green, and blue color channels
• Range: 0-100% (zero color to max color)– Also: 0-255 (integer)
• Can be expressed as percentage or integer:P {color: rgb(0, 100%, 100%);}
or
P {color: rgb(0, 255, 255);}
Web Design Principles 5th Ed. 50
![Page 51: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/51.jpg)
Using Hexadecimal Color Values
• Numerical values that specify the blending of the red, green, and blue color channels– Base 16 number system (0-9, A-F)
• Range: 00-FF (zero color to max color)– Example: Red FF 00 00
– The following rules specify the same color:P {color: #00FFFF;}
P {color: rgb(0, 100%, 100%);}
P {color: rgb(0, 255, 255);}
Web Design Principles 5th Ed. 51
![Page 52: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/52.jpg)
Understanding Element Layers
• Background color layer—the backmost layer, specified by the background-color property
• Background image layer—the middle layer, specified by the background-image property
• Content layer—the frontmost layer; this is the color of the text content; specified by the color property
Web Design Principles 5th Ed. 52
![Page 53: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/53.jpg)
Web Design Principles 5th Ed. 53
![Page 54: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/54.jpg)
Controlling Color Properties with CSS
![Page 55: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/55.jpg)
Controlling Color Properties with CSS
• Specifying color values• Setting default text color• Changing link colors• Specifying background color• Setting the page background color• Creating a text reverse
Web Design Principles 5th Ed. 55
![Page 56: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/56.jpg)
Specifying Color Values
/* color name */ p {color: blue;}/* hexadecimal value */p {color: #0000ff;} /* RGB numbers */ p {color: rgb(0,0,255);}/* RGB percentages */p {color: rgb(0%,0%,100%);}
The following style rules show the different methods of specifying a color:
Web Design Principles 5th Ed. 56
![Page 57: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/57.jpg)
Web Design Principles 5th Ed. 57
![Page 58: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/58.jpg)
Changing Link Colors
• You can change the colors of hypertext links by using the following special CSS classes
• link—the unvisited link color• active—the active link color; this is the color
displayed when the user points to a link and holds down the mouse button
• visited—the visited link color
Web Design Principles 5th Ed. 58
![Page 59: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/59.jpg)
Changing Link Colors
• You can use these special classes only with the <a> tag
• The syntax uses a colon (:) flag character as shown in the following examples:
a:link {color: #000000;} /* new links are black */a:active {color: #FF0000;} /* active links are red */a:visited {color: #CCCCCC;} /* visited links are gray */
Web Design Principles 5th Ed. 59
![Page 60: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/60.jpg)
Web Design Principles 5th Ed. 60
![Page 61: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/61.jpg)
Specifying Background Colors
• Background-color– Sets the background color of any element on a
Web page (including padding area)– By default, background color of any element is
transparent
Web Design Principles 5th Ed. 61
![Page 62: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/62.jpg)
Web Design Principles 5th Ed. 62
![Page 63: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/63.jpg)
Setting Page Background Color
• To set the page background color, use body as the selector
• The following rule sets a background color for the <body> element
body {background-color: #c5f0ff;}
Web Design Principles 5th Ed. 63
![Page 64: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/64.jpg)
Web Design Principles 5th Ed. 64
![Page 65: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/65.jpg)
Creating a Text Reverse
• The background and foreground colors are reversed
• The following rule sets the text color to white and the background color to blue:
h1 { color: #fff;
padding: .25em;
background-color: #f90000;
}
Web Design Principles 5th Ed. 65
![Page 66: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/66.jpg)
Web Design Principles 5th Ed. 66
![Page 67: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/67.jpg)
Controlling Background Images with CSS
![Page 68: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/68.jpg)
Specifying a Background Image
• The background-image property lets you specify which image to display
• Other CSS background properties control how the image is displayed
Web Design Principles 5th Ed. 68
![Page 69: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/69.jpg)
Web Design Principles 5th Ed. 69
![Page 70: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/70.jpg)
Web Design Principles 5th Ed. 70
![Page 71: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/71.jpg)
Creating a Page Background
• To tile an image across the entire background of the Web page, use body as the selector
body {background-image: url(clouds.jpg);}
Web Design Principles 5th Ed. 71
![Page 72: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/72.jpg)
Creating an Element Background
h1 {background-image: url(bluetex.jpg); padding: .25em;}
• Images can be applied to the background of any element
• The following rule applies an image to the background of the H1 element:
Web Design Principles 5th Ed. 72
![Page 73: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/73.jpg)
Web Design Principles 5th Ed. 73
![Page 74: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/74.jpg)
Specifying Background Repeat
• Controls tiling of background images
body {
background-image: url(grayivy.jpg);
background-repeat: repeat-y;
}
Web Design Principles 5th Ed. 74
![Page 75: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/75.jpg)
• Allows creation of a vertically repeating background graphic
body {
background-image: url(column.jpg);
background-repeat: repeat-y;
}
Creating a Vertical Repeat
Web Design Principles 5th Ed. 75
![Page 76: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/76.jpg)
Web Design Principles 5th Ed. 76
![Page 77: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/77.jpg)
Creating a Horizontal Repeat
• Allows creation of a horizontally repeating background graphic
body {
background-image: url(header.jpg);
background-repeat: repeat-x;
}
Web Design Principles 5th Ed. 77
![Page 78: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/78.jpg)
Web Design Principles 5th Ed. 78
![Page 79: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/79.jpg)
Creating a Nonrepeating Background Image
• Allows creation of a single instance of an image in the background
• The following style rule shows the use of the no-repeat value:body {
background-image: url(balloon_sm.jpg);
background-repeat: no-repeat;
}
Web Design Principles 5th Ed. 79
![Page 80: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/80.jpg)
Specifying Background Position
• The background-position property lets you use three types of values: percentage, length, or keywords
#right {
background-image: url(rightgradient.gif);
background-repeat: repeat-y;
background-position: right;
}
Web Design Principles 5th Ed. 80
![Page 81: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/81.jpg)
Web Design Principles 5th Ed. 81
![Page 82: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/82.jpg)
Positioning Vertical and Horizontal Background Images
• Positions images that repeat on either the horizontal or vertical axis of the Web page
Web Design Principles 5th Ed. 82
![Page 83: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/83.jpg)
Web Design Principles 5th Ed. 83
![Page 84: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/84.jpg)
Summary
• The four popular file formats for the Web are GIF, JPG, PNG, and SVG
• Your computer monitor displays color by mixing the three basic colors of light: red, green, and blue (RGB)
• Reduce image size to the appropriate dimensions
• The color scheme you choose for a Web site should create a distinctive look without detracting from your content’s legibility
Web Design Principles 5th Ed. 84
![Page 85: Ppt ch08](https://reader033.vdocument.in/reader033/viewer/2022051314/54c817984a7959f6158b45af/html5/thumbnails/85.jpg)
Summary
• Use the color property to set foreground colors for elements
• Background colors affect any padding areas in the element
• Choose background images that do not detract from the legibility of your content
• Test your work on different browsers and computing platforms
Web Design Principles 5th Ed. 85