CSS - Cascading Style Sheets

An Interactive How To Code CSS Tutorial for Beginners

Learn faster with my new interactive CSS course for iPad!

CSS: CSS Background, Image, and Color Styles

Our Hosting Partners:
iPage Affordable Web Hosting only $2.95/mo
iPage Hosting $1.99/mo

Free Domain Name
If you Order Today!

Our CSS Style topics:


CSS Code Tutorial Chapters:

  1. Introduction
  2. Basics of CSS
  3. All About Selectors
  4. Background and Color
  5. Fonts and Text
  6. Links
  7. Lists
  8. Margin
  9. Padding
  10. Border
  11. Good CSS Design
  12. Resources

visit our other tutorials:

web design tutorial
html code tutorial


Cascading Style Sheets: an Interactive Tutorial

CSS Background, Image and Color Styles

One of the interesting things about using CSS is that most things can have a background image, background color, and foreground color. The entire page's properties can be made using a body selector, while you can easily use other selectors such as p or table to define background and color properties.


You are probably familiar with the <body> tag. A typical <body> tag looks something like this:

<body background="graphic.jpg" text="#FFFFFF" bgcolor="#000000">

To convert that into CSS, it looks like this:

body { background-image: url(graphic.jpg);
color: #FFFFFF; background-color: #000000; }

Big deal right? But CSS adds some special features. One of the most important is the background-repeat property. It has these values: repeat, repeat-x, repeat-y, or no-repeat. A regular web page has a default of background-repeat: repeat, which means the image is repeated both horizontally and vertically. With CSS, you can set the background to repeat horizontally (repeat-x), repeat vertically (repeat-y), or not repeat at all (no-repeat).

We can edit the style mentioned above to have the body's background never repeat by adding background-repeat: no-repeat:

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

If you want to include the repeat in your standard background tag (for example, if are not using CSS for the rest of your page), you can add style="background-repeat: no-repeat;", so it looks like this:

<body background="graphic.jpg" text="#FFFFFF" bgcolor="#000000" style="background-repeat: no-repeat;">

Remember that although over 90% of web browsers in use today support CSS, there are still some that do not. It may be helpful to use the standard <body> tag to define a text and bgcolor, and then use a style sheet to define everything else, using the same color and background-color values.

If you are using anything but repeat for a background-repeat, you should read the margin chapter of this guide to make sure your background doesn't make your text hard to read.

advertisement
Our Hosting Partners:

The Original $3.15/mo. FatCow Plan - Unlimited Disk Space, Unlimited Transfer, Unlimited E-mails & Site building tools.

iPage Hosting $4.25/mo
1&1 Hosting $6.99/mo

Free Domain Name If you Order Today!

Copyright © Dave Kristula. All Rights reserved.