65% off at FatCow!
iPage Hosting
1&1 Hosting $6.99/mo
Free Domain Name
If you Order Today!
Our CSS Style topics:
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
CSS Background, Image and Color Styles
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.
Dave has a
New Course for your iPad!Download HTML and CSS Web Design Basics Right Now! Or Search for "Web Design Basics" in AppStore!
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 |
The Original $3.15/mo. FatCow Plan - Unlimited Disk Space, Unlimited Transfer, Unlimited E-mails & Site building tools.
iPage Hosting
1&1 Hosting $6.99/mo
Free Domain Name If you Order Today!