web blazonry web development scripts and tutorials Get best price on Unlocked Moto G Stylus
   PHP       Name Generators       Perl       CSS       Javascript       Java       MySql       How Tos       Resources   

CSS Home

CSS Tutorial
  Getting Started
  The Basics
  Fonts and Text
  Tips and Tricks
  Problems & Compatibility
  CSS Reference Guide

Bookmark and Share

CSS Tutorial: Backgrounds

There are 5 background properties, and 1 shorthand.

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background (shorthand)

The nice thing about backgrounds is that it doesn't have to apply to the whole screen, as the normal background HTML tag does. To apply a background to the whole page, you use it in the body tag.

You can specify backgrounds in paragraphs, table cells, headers and almost anything else you want.

background-color and background-image
These two are very straight forward. For background-color the valid values are colors, be it rgb, hex, or color name, and transparent, which makes the background transparent.

There are only two values for background-image, none and a url to point to an image object.


P.bg1 { background-color: #000000;
color: #FFFFFF; /* color the text white */ }

P.bg2 { background-image: url(images/bg1.gif) }

click here for a not so pretty example Use better judgment than I did with this example, but you can see what it can do.

Valid values are: repeat, repeat-x, repeat-y, and no-repeat. A value of repeat, repeats the background horizontally and vertically. repeat-x only repeats the background in the horizontal direction, repeat-y vertical direction. And as you might have thought no-repeat does not repeat the background at all.

There are two values for background-attachment, scroll and fixed. A valid you of scroll is what is common with browsers today. The background scrolls along as you do. A value of fixed will keep the background fixed, with the text and other goodies scrolling on top of it.

You can specify where the background is to be placed with this property. Valid values are: length, percentage, top, center, bottom, left, right.

For example you have a table cell which is bigger than the background image, and you want it to be in the bottom right corner of that cell. Here's the code:

TD.bg1 { background-position: bottom right } or TD.bg1 { background-position: 100% 100% }

Both of these will do the same thing, you can also position the backgrounds by specifying the pixels offset of the image.

background (shorthand)
The shorthand notation for background follows the order: background-color, background-image, background-repeat, background-attachment, and background-position


P { background: white url(bg1.gif) no-repeat fixed }

Next >>


Newest Pages
Test Google Ads Ver. 2
Free Linux Admin Books
Free Linux Books for Programmers
Free Books for Linux on the Desktop
Free PHP Books
Free JavaScript Books
Free Java Books - Advanced
Free Java Books - Basic
Free Perl Books
Free Python Books
Quote of the Day (PHP)
Debugging Part 2
How to Test Google Ads
Most Popular Pages
Baby Name Generator
U.S. Name Generator
Wu Name Generator
Popup Windows (JavaScript)
Upload and Resize an Image (PHP)
How To Install Apache + PHP + MySQL
Intro to Web Databases (PHP, MySQL)

Least Popular Pages
iNews Applet (Java)
Java Resources
Site Monitor (Perl)
PHP Resources

  privacy policy     ||     © 1997-2016. astonishinc.com   All Rights Reserved.