1. Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Colors & Backgrounds Instructor: Joseph DiVerdi, Ph.D., MBA

2. Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Specifying Body Colors BODY Tag Accepts Several Color Attributes –Text Color –Background Color (or Image) –Link Unvisited or Not Yet Followed –Active (Link) Depressed Mouse Cursor –Visited (Link) Been There, Done That, Got the T-shirt, Saw the Movie... CSS Properties Can Replace These Attributes

3. Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Specifying Body Colors Emulate standard HTML behavior BODY {color: black; background-color: white; } A:link {color: red; } A:visited {color: purple; } A:active {color: blue; } Even More Complicated Effects Can Be Achieved

4. Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Specifying Body Colors BODY { color: black; background-color: white; } A:link { color: red; } A.external:link { color: green; } A:visited { color: purple; } A.external:visited { color: aqua; } A:active { color: blue; }... Viewers Can Easily Tell the Difference Between Intra-site Links & Off-site Links by Colors

5. Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Specifying Element Colors Each Element Can Have Foreground & Background Colors Specified It Is Also Possible to Specify Transparent to Allow the BODY Background to Show Transparent Is the Default for Many Elements H1 { color: black; background-color: transparent; } Specify Both to Pass CSS Validation

6. Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Background Images Background Images Are Included Using URL BODY { color: black; background-color: white; background-image: url(/~diverdi/images/stone.jpeg); } Always Specify Foreground & Background Colors –In Case of Leakage

7. Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Element Background Images Can Be Applied to Individual Elements –Used to Really Emphasize Links With CLASS A.GRID { background-image: url(smallgrid.gif); } –Used to Create a Selective Paragraph Effect P.STAR { background-image: url(/stars.gif); } –Add a Background for a Table Cell TD.NAV { background-image: url(grid.gif); }

8. Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Background Image Controls Several Different Properties Discussed –Background Repeat –Background Position –Background Attachment –Combined Background

9. Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Background Repetition Active for Images Smaller Than Monitor background-repeat: repeat | repeat-x | repeat-y | no-repeat Independent Control Over Both Dimensions Moderate Support Across Browsers & OSes –Better With Higher Version Browsers See Figures 6-27 to 6-31 of Textbook For Examples

10. Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Background Position Shifts Image Whether Repeated or Not background-position: top | center | bottom left | center | right Independent Control Over Both Dimensions Consistent Support Across OSes Significant Differences Among Browsers See Figures 6-27 to 6-47 of Textbook –Watch Out for Poor Support of Negative Offset

11. Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Hands On Experiment With Images Provided on Course Web Site –stone.jpeg Provides Continuous Background JPEG Image Does Not Offer Transparency –Background Color Is Not Visible BODY { background-image: url(/image/stone.jpeg); background-color: red; color: black; }

12. Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Hands On Experiment With Images Provided on Course Web Site –camel.gif Transparent GIF Permits Background Color to Show BODY { background-image: url(/image/camel.gif); background-color: red; color: black; }

13. Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Hands On Experiment With Images Provided on Course Web Site –camel.gif Note Effects of background-repeat Note Effects of background-position BODY { background-image: url(/image/camel.gif); background-repeat: no-repeat; background-position: top left; background-color: red; color: black; }

14. Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Background Scrolling Control Scrolling of Background Image background-attachment: fixed | scroll Force a Single Copy of a Background Image to Remain Fixed in the Display Window Consistent Support Across OSes Significant Differences Among Browsers See Figure 6-55 of Textbook

15. Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Hands On Experiment With Image Provided on Course Web Site –camel.gif BODY { background-image: url(/image/camel.gif); background-position: center center; background-attachment: fixed; } Oooooohhhh!

16. Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Background Images CSS Background Properties Permit the Use of a Very Small Background Image to Support a Very Wide Range of Monitor Sizes –Use 10 Pixel High Image As Background –Background Is Automatically Repeated Vertically How Wide Should It Be? –As Narrow As Possible –Only Enough to Define "Sidebar" Pixels –Background Color Will Fill in Remainder

17. Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Background Images Using a Background Image to Achieve an Attractive Gradient Background –That Works Well On A Wide Variety of Monitors –That Doesn't Require Browser Detection –That Doesn't Hog Network Resources Keep It Simple...

18. Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Background Images

19. Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Gradient Background How High Should Background Image Be? –Image Is Repeated Vertically –Page is Always Covered No Matter How High Image Can Be Only One Pixel High To Minimize File Size In Practice, Use Roughly Ten Pixel High Image –Longer Download Than One Pixel High Image –Faster Rendering Than One Pixel High Image

20. Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Gradient Background How Wide Should Background Image Be? –Need to Accommodate Different Size Monitors And Those Viewers Who Don't Maximize Windows

21. Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Gradient Background Make a Wide Background Image –Because If Monitor is Wider Than Image Image Repeats Horizontally Background Bleeds –So Go Even Wider –However For Monitors Narrower Than The Widest Can't See All Gradient Waste of Bandwidth –How Wide Is Wide Enough? Is 1200 Pixels Enough? Maybe... See Figure 6-27 on Page 172 of Textbook

22. Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Gradient Background Pick a Width –For The Actual Gradient Perhaps 100 or 200 Pixels –It's a Compromise Get Over It Position Background Image at Top & Left Select Background Color to Match Gradient Right Repeat Vertically (Y) Do Not Repeat Horizontally (X)

23. Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Gradient Background BODY { color: black; background-color: rgb(100%, 50%, 50%); background-image: url(/~diverdi/image/background.jpeg); background-position: top left; background-repeat: repeat-y; }

24. Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Hands On Experiment With Image Provided on Course Web Site –background.jpeg BODY { color: black; background-color: rgb(100%, 50%, 50%); background-image: url(/~diverdi/image/background.jpeg); background-position: top left; background-repeat: repeat-y; }

25. Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Specified using Background Shorthand for All Background Properties H1 { background: white url(/image/background.jpeg) repeat-y scroll top left; } Like Font, Syntax Is a Bit Complicated...

26. Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Specified using Background H1 { background: || || ; } All Properties Are Optional Order Is Totally Arbitrary Support Is Almost the Same as for Individual Properties

27. Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Hands On Test the Various Background Properties Using Your Web Pages Test the Syntax of the Combined Background Property Using Your Web Pages Verify That Various Combinations Conform to the Rules Provided