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



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




• 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




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



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



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



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); }



Background Image Controls

• Several Different Properties Discussed– Background Repeat– Background Position– Background Attachment– Combined Background



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



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



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;

}



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);


color: black;

}



Hands On

• Experiment With Images Provided on Course Web Site– camel.gif

• Note Effects of background-repeat

• Note Effects of background-position

BODY {


background-repeat: no-repeat;

background-position: top left;


color: black;

}



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



Hands On

• Experiment With Image Provided on Course Web Site– camel.gif

BODY {


background-position: center center;

background-attachment: fixed;

}

• Oooooohhhh!



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



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...



Background Images



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



Gradient Background

• How Wide Should Background Image Be?– Need to Accommodate Different Size Monitors

• And Those Viewers Who Don't Maximize Windows



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



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)



Gradient Background

BODY {

color: black;

background-color: rgb(100%, 50%, 50%);

background-image: url(/~diverdi/image/background.jpeg);


background-repeat: repeat-y;

}



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-repeat: repeat-y;

}



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...



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



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

introduction to css css backgrounds - fort collins, co copyright © xtr systems, llc cascading style...

Documents

css properties

black backgroundcolor

body colors body tag

copyright xtr systems

image link unvisited

mba slide

standard html behavior

joseph diverdi