Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style...
-
Upload
sasha-callahan -
Category
Documents
-
view
222 -
download
0
Transcript of Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style...
Introduction to CSSCSS Backgrounds - Fort Collins, CO
Copyright © XTR Systems, LLC
CascadingStyle Sheets -
Colors & Backgrounds
Instructor: Joseph DiVerdi, Ph.D., MBA
Introduction to CSSCSS 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
Introduction to CSSCSS 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
Introduction to CSSCSS 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; }
<A HREF="my_host.com/index.html">...</A>
<A CLASS= external HREF="other_host.com/index.html">...</A>
• Viewers Can Easily Tell the Difference Between Intra-site Links & Off-site Links by Colors
Introduction to CSSCSS 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
Introduction to CSSCSS 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
Introduction to CSSCSS 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); }
Introduction to CSSCSS Backgrounds - Fort Collins, CO
Copyright © XTR Systems, LLC
Background Image Controls
• Several Different Properties Discussed– Background Repeat– Background Position– Background Attachment– Combined Background
Introduction to CSSCSS Backgrounds - Fort Collins, CO
Copyright © XTR Systems, LLC
Background Repetition
• Active for Images Smaller Than Monitorbackground-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
Introduction to CSSCSS Backgrounds - Fort Collins, CO
Copyright © XTR Systems, LLC
Background Position
• Shifts Image Whether Repeated or Notbackground-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
Introduction to CSSCSS 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;
}
Introduction to CSSCSS 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;
}
Introduction to CSSCSS 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;
}
Introduction to CSSCSS Backgrounds - Fort Collins, CO
Copyright © XTR Systems, LLC
Background Scrolling
• Control Scrolling of Background Imagebackground-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
Introduction to CSSCSS 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!
Introduction to CSSCSS 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
Introduction to CSSCSS 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...
Introduction to CSSCSS Backgrounds - Fort Collins, CO
Copyright © XTR Systems, LLC
Background Images
Introduction to CSSCSS 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
Introduction to CSSCSS 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
Introduction to CSSCSS 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
Introduction to CSSCSS 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)
Introduction to CSSCSS 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;
}
Introduction to CSSCSS 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;
}
Introduction to CSSCSS 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...
Introduction to CSSCSS Backgrounds - Fort Collins, CO
Copyright © XTR Systems, LLC
Specified using Background
H1 {
background:
<background-color> || <background-image> ||
<background-repeat> || <background-position> ||
<background-attachment>;
}
• All Properties Are Optional• Order Is Totally Arbitrary• Support Is Almost the Same as for Individual
Properties