CSS Colors and Backgrounds

TOC

Coloring elements in CSS is accomplished in various ways depending on the element type. Color triplets such as #990000 can be abreviated #900. To get intermediate shades, use the full six-digit triplet, e.g., #eac5c5:

The most effective way to apply colors is to create classes of content that all use the same “look”. For example, let’s say you want all your section heads to have a black rule above them, and be red sans-serif bold text. Create a class:

.section_head {
  padding:.1em;
  border-top: 1px solid #000;
  font-family: sans-serif;
  font-weight: 700;
  color: #900;
  background-color: #fee;
  }

<h3 class="section_head">Heading 3</h3>
<p>
Use a top border, padding and font family 
settings to make attractive headers.
</p>

Backgrounds

We’ve already applied color to backgrounds, but suppose you want to add a little texture to the heading style, above. The way to do that is to make a small image, such as this jpg: and use the background-image declaration:

background-image: url(i/redstripehbg.gif);

Add that declaration to the style class for headers:

.section_head {
  padding:.1em;
  border-top: 1px solid #000;
  font-family: sans-serif;
  font-weight: 700;
  color: #900;
  background-image: url(i/redstripehbg.gif);
  }

<h3 class="section_head">Heading 3</h3>
<p>
Use a top border, background image,
padding and font family 
settings to make attractive headers.
</p>

CSS assumes you want to start at the upper left and repeat the image in both X (horizontal) and Y (vertical) directions (‘tile’ it) to fill the background area of the selected box, unless you explicitly tell it not to. Also, images are laid on top of any background color you specify -- otherwise the image would be hidden.

For another effect, you could limit the tiling to the Y direction by adding the background-repeat directive:

.section_heady {
  padding:.1em;
  border-top: 1px solid #000;
  font-family: sans-serif;
  font-weight: 700;
  color: #900;
  background-image: url(i/redstripehbg.gif);
  background-repeat: repeat-y;
  }

<h3 class="section_heady">Heading 3</h3>

To position a background image simply, say in the upper right of the page background, and NOT repeat it at all, use the no-repeat:

body {
  background-color: #cc9 
  background: url(i/spiderweb.gif);
  background-repeat: no-repeat;
  background-position: top right;
  }

The possibilities are not endless, but there are many. For instance, you can position images a fixed amount (pixels) or a percentage of page width from the top and left of the page with this declaration:

background-position: 33% 66%;

To position an image, CSS calculates the center of the image and the center of the space the size of the image you want to place it in, and tries to make them coincide. For example, setting the X and Y to 0% 0% puts the upper left corner of the image in the upper left corner of the element box. Setting them to 50% 50% puts the image dead center, while 100% 100% puts the image lower right corner in the lower right corner of the element box. In other words, the image will always be visible if the percentages are between 0 and 100 percent. Using negative or greater than 100 percent can be unpredictable in some browsers.

If you give a single percentage value, it is assumed to be the X setting, and the Y setting is assumed to be 50%. Giving the location in lengths (pixels) positions the upper left corner of the image that many pixels across and down from the upper left of the element box. For example, the declaration background-position: 40px 60px; puts the upper left corner of the image 40 pixels to the right and 60 pixels down from the upper left corner.

Here we’ve added some design interest by placing a background image, moving the heading to the right, and giving the text paragraph a right border, using CSS class selectors:

body {
  background-color: #fff;
  background: url(i/circlebg.gif);
  background-repeat: no-repeat;
  background-position: 90% 10%;    /* x(horiz) x(vert) */
  }
.h3right {
  text-align: right;
  }
.pvbar {
  padding-right: .5em;
  border-right: 3px solid #aa8;
  }

<< Padding, Borders and Margins | Index | Floating and Positioning >>