Dave's CSS Tutorial -- Background and Color -- CSS Guide- Cascading Style Sheets

davesite.com / webstation / css

CSS Code Tutorial Chapters:

CSS Code Tutorial Chapters:

Introduction
Basics of CSS
All About Selectors
Background and Color
Fonts and Text
Links
Lists
Margin
Padding
Border
Good CSS Design
Resources

visit our other tutorials:

web design tutorial
html code tutorial

[ jump to top ]

Cascading Style Sheets: an Interactive Tutorial

Background and Color

part 2

advertisement

advertisement
$10 off web hosting by FatCow!

There are two more important background properties: background-attachment and background-position.
background-attachment merely allows you to decide if you want the background to scroll or not. If you want it to scroll, use background-attachment: scroll. If you want it to not scroll, use background-attachment: fixed.
background-position allows you to position the background. It takes two values, the first is the the vertical position (in px [pixels], % [percent], or top, center, bottom) and the second value is the horizontal position (in px [pixels], % [percent], or left, center, right).
If you want a background to be at the top right, use: background-position: top right. If you want it to be at the bottom center, use background-position: bottom center. This is typically most useful used with background-repeat: no repeat.
As you can see, the coding for the background can get pretty long. CSS lets you combine it all into a single property statement, known as background. It follows this format:
background: background-color || background-image || background-repeat || background-attachment || background-position

If you want a background color of white, a background image lightpattern.jpg, the background to never repeat, and never scroll, you could use:

body { background: #FFFFFF url(lightpattern.jpg) no-repeat fixed; }

Remember, you'll also need to set the text color, so add color: #000000 (if you want black text)

body { background: #FFFFFF url(lightpattern.jpg) no-repeat fixed; color: #000000; }

Notice that the browser is smart enough to realize that a value (in this case: background-position) is missing and it ignores that value.
Always set a text and bgcolor in <body> for full browser compatibility.
Ready to test your skills? I've placed two backgrounds at the URLs below. Try a variety of background styles until you are satisfied with your knowledge of backgrounds. Remember to try background with an element other than body. A good candidate is the p tag.

url(/graphx/back.jpg)
url(/graphx/bgdavesite.gif)

<html> <head> <style type="text/css"> </style> </head> <body> </body> </html>

Click here to see one example I tried.
Click here to see a second example I tried.
advertisement

< Ch. 4 part 1 > Chapter 5

Learn about the #1 Ranked Green Web Host. Unlimited Space.
Unlimited Domains. First Domain Free & Free Setup. Click Here.