Lesson 5.1: Background Basics

Having everything on your page with a white background can be rather boring. Far more than “rather boring.” Luckily, CSS provides us an easy and flexible method to get some background color and even images into your page.

The background Property

The main CSS property that allows us to modify the backgrounds is the background property. As with many other CSS elements there are also smaller background properties: background-color, background-image, background-position, background-repeat, and background-attachment. Each of these go into the background property and we’ll go into details of each of them.

The background-color Property

In this portion of the lesson we just want to talk about background color and how to use it for various elements. The background-color property takes one color value, either a keyword, a three-digit, or six-digit hex code. You can also use the background property itself with just a color value to achieve the same effect.

Here are a few examples:

background: #333; /* Sets the background to a dark grey. */
background-color: #0F0; /* Sets the background to a neon green. */
background-color: #F00; /* Sets the background to red. */
background: #FF0000; /* Sets the background to red. */
background-color: red; /* Sets the background to red. */

As you can see, they all function just alike, regardless which method you use.

The nature of backgrounds

So, now we’ve learned how to specify the background color. Now let’s talk a bit more about the nature of backgrounds before we move on to using image backgrounds.

Backgrounds are, of course, the image at the back-most of a container, whether it be a division, span, paragraph, or the body itself. If you have a background, in one container, that background will fill the entire container and block anything behind that container. Let’s look at an example:

body { background: red; }
div { width: 800px; height: 500px; margin: 0 auto; }
#div1 { background: blue; }

<div id="div1">Some text</div>
<div>No background for this one.</div>

View Live Example

So, this is a simple example. We have a (hideous) red background for the body which has a division over top of it who’s background has been set to blue. We then have some text within the division. If we didn’t set a background for it’s division, the division would essentially have no background, so the text would be directly over red, as it is in the second division.

Hopefully this will help illustrate how elements without backgrounds are essentially transparent and allow the background from the element underneath it to show through. Also note that color backgrounds feel up the entire element, not just some section. When we move onto image backgrounds this will change a bit.

In this lesson we learned the very basics of backgrounds, including how to fill them with color and how this color acts. In our next lesson we’ll learn to use images as backgrounds, and learn how to position them and get them to work with colored backgrounds if we’d like: Lesson 5.2: Picturesque Backgrounds – The Pieces