CSS - Cascading Style Sheets

An Interactive How To Code CSS Tutorial for Beginners

No Risk, No Contracts! - Learn coding, Web 
Design and More!

Learn faster on your iPad with my new interactive CSS guide!

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:

No Risk, 
No Contracts.  Learn More.

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.

Affordable, Online Technology Education - Learn Web Design, Coding & More. 1st Month FREE at TeamTreehouse.com

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.

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.

Be rewarded for watching cool online videos at Swagbucks!
The more you watch, the more Reward Points you earn! Join Today