CSS - Cascading Style Sheets

An Interactive How To Code CSS Tutorial for Beginners


This course was developed in 2002. The CSS all still works, but I've added Web Design Basics for iPad (same Dave, much better course!)

Our Hosting Partners:
iPage Hosting $1.99/mo

Free Domain Name
If you Order Today!

Our CSS Style topics:



Cascading Style Sheets: an Interactive Tutorial

CSS Background, Image and Color Styles

Chapter 4 part 2 (of 2)

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)

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

< Ch. 4 part 1 > continue to Chapter 5

Our Hosting Partners (Sponsored Ads):
  iPage Hosting $1.99/mo
  1&1 Hosting $6.99/mo
Free Domain Name If you Order Today!


Copyright © Dave Kristula. All Rights reserved.