Web Page Design, Webpage Design, eBay Store Design, ebay Template Design, Auction Listing Template,
Logo Design, PayPal Shopping Cart, Zen Cart, OSCommerce, HTML Tutorials, CSS Tutorials,
SEO Tutorials, eBay Tutorials, Free Online Auction Template Creator

CSS: Backgrounds/Color

Before CSS, you could only add background colors and images to the whole page, a table or table data cell. Now you have full control over what gets color or a background, even down to a single word. Not only can you easily add backgrounds, you also have control on the positioning of the backgrounds, if the background image is to repeat or not and even the direction in which it is to repeat.

The CSS properties the control color and backgrounds are:

color:
background-color:
background-image:
background-repeat:
background-position:
background-attachment:

Adding Color to Text

The Color property works much like it does with HTML. It is for applying color to text only. With this CSS rule, as soon as you have bold text on your page, like this text, the browser will display it in the color specified. In reality, what you're doing is specifying the "foreground" color of the text. The second example sets a Class as orange text. The third example uses the <span> tag to make the text the specified color. You can read more about selecting your colors by visiting our tutorial for Color Values.

b {
color: #ff6600;
}
.orangetext {
color: #ff6600;
}

<span style="color: #ff6600;">Orange</span>

Adding Color to a Background

In order to put a background color behind an element using HTML, you have to resort to creating a table cell around the element and then filling the cell with a solid color. With CSS, background colors are much easier. By using the CSS property background-color: xxx; you can add a solid color behind any element on a Web page, including images.

The first rule below states that anytime <p> tag is used the paragraph will have a yellow background. The second rule states that by using the Class "lightyellow" that the element it is applied to will have a light yellow background.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

p {
background-color: #f0d88b;
padding: 6px;
}
.lightyellow {
background-color: #f0d88b;
}

You can also use background-color: transparent;. This means that the background you'll see is whatever background would normally show through; that is, any inherited background color is ignored.

Adding Background Images

With CSS, you can place an image behind any element on the page. The property for all this is background-image: url(file.gif);. You add the image's filename (which can be defined relatively or absolutely) in round brackets. Your image will tile behind whatever text or element you've added it to. You can add a background to an entire page by adding this CSS to the body. As you should have done before, whenever you specify a background image you should also add a similar-colored background color to preserve legibility.

.bg1 {
background-image: url(img/back_2.gif
background-color: #d4dda6;
}

TIP: You may see some Web pages using quote marks as well as the brackets around the URL of the image they are using as a background, as in background-image: url("image.gif");. This is unnecessary and advised against, as it causes IE/Mac to cough and splutter. Leave the quotes out.

Controlling Backgrounds

Not only can you add backgrounds to any page element, you can control exactly how the background is displayed. With HTML the only option is for the background image to repeat. Now you can specify whether the image repeats vertically, horizontally, or not at all. The property is "background-repeat". The values you can use are no-repeat, repeat-x (horizontally), or repeat-y (vertically). If you do not specify a property, the default is to repeat.

<table align="center" width="400" cellspacing="10" cellpadding="10" style="background-image: url(img/back_1.gif); height: 100px;">
  <tr>
    <td style="background-image: url(img/back_2.gif); width: 25%; background-color: #ffffff;"></td>
    <td style="background-image: url(img/back_2.gif); background-repeat: no-repeat; width: 25%; background-color: #ffffff;"></td>
    <td style="background-image: url(img/back_2.gif); background-repeat: repeat-x; width: 25%; background-color: #ffffff;"></td>
    <td style="background-image: url(img/back_2.gif); background-repeat: repeat-y; width: 25%; background-color: #ffffff;"></td>
  </tr>
</table>

You can also specify the position of your background behind the element it is applied to. You can either position the image away from the top-left corner with pixels or used one of the allowed values: top, center, bottom, left, right.

<table align="center" width="400" cellspacing="10" cellpadding="10" style="background-image: url(img/back_1.gif); height: 100px;">
  <tr>
    <td style="background-image: url(img/back_2.gif); background-repeat: no-repeat; background-position: 12px 12px; width: 16%; background-color: #ffffff;"></td>
    <td style="background-image: url(img/back_2.gif); background-repeat: no-repeat; background-position: top; width: 16%; background-color: #ffffff;"></td>
    <td style="background-image: url(img/back_2.gif); background-repeat: no-repeat; background-position: center; width: 17%; background-color: #ffffff;"></td>
    <td style="background-image: url(img/back_2.gif); background-repeat: no-repeat; background-position: bottom; width: 17%; background-color: #ffffff;"></td>
    <td style="background-image: url(img/back_2.gif); background-repeat: no-repeat; background-position: left; width: 17%; background-color: #ffffff;"></td>
    <td style="background-image: url(img/back_2.gif); background-repeat: no-repeat; background-position: right; width: 17%; background-color: #ffffff;"></td>
  </tr>
</table>

Attaching Backgrounds

There is an IE-only tag in recent times that allowed you to achieve a non-scrolling repeating background (bgproperties="fixed"), but now this is part of the CSS standards so you should use this instead. Your property for this one is background-attachment. This CSS works best if applied to the body tag, but most current browser versions you can add a non-scrolling background image to anything, which can give some nice affects.

body {
background-image: url(background.gif);
background-attachment: fixed;
}

HTMLTutorials

• HTML/CSS Tutorials
• Introduction to HTML
• What is an URL?
• Browser Safe Fonts
• Formatting Your Text
• <p>, <br>, <hr>
• The Marquee Tag
• Adding/Sizing Images
• Text/Image Links
• Making Lists
• Tables: The Basics
• Table Backgrounds
• Colspan, Rowspan
• Sample Tables
• Color Values

CSSTutorials

• Introduction to CSS
• Backgrounds/Color
• <div>, <span>
• Formatting Text
• Formatting Lists
• Images
• Style Your Links
• Tables and CSS
• Fun with CSS

JavascriptTutorials

• Rollover Buttons
• Image Swap
• Easy Popup Windows

eBayTutorials

• eBay Related Questions
• Your eBay Store
• Self Hosting Photos

OtherTutorials

• Photo Size/Compression
• Using Irfanview
• Using TagBot
• Speaking Geek

Create Your Auction Listing FREE

Use our FREE online Auction template creator. Choose from many backgrounds or use or own. We host all images except your photos and logo. Easy to use! Try now!

Web Safe Fonts

Building your own Web Site or Auction Listing and not sure what the best fonts to use are? Find out now!