Lesson 5.2: Backgrounds – Picturesque Backgrounds – The Pieces

In our last lesson we discussed some of the background basics and learned how to use simple colors for our backgrounds. In this lesson we’ll go one step further and learn how to use images for our backgrounds.

The Other background Properties

In our last lesson we learned that there are several background-related properties. We also learned about the background-color property. Let’s go ahead and learn about the other properties, then we’ll learn how to put them all together and make them work for us.

background-image

The background-image property is the property that let’s use define the image we want to use for our background. It uses a CSS function, url() to specify our image’s URL. You simply put the URL (relative or absolute) within the parentheses for the url function. Here is are a few examples:

background-image: url(http://www.mydomain.com/background.png);
background-image: url(/images/background.png);
background-image: url(background.png);

One thing to make note of is when you specify a relative path, it needs to be relative to the CSS file, not necessarily the file that it is used in.

background-position

The background position allows us to specify how the background is positioned. If the background-attachment is set to fixed, then the position is relative to the browser window, not the element (similar to absolute positioning). If it is set to scroll, it is relative to the element itself.

You can specify the value with any CSS unit of measurement, with percentages, or with a handful of keywords.

You can specify one or two values. If you specify just one, the other is assumed to be “center”. If you have two values, the first refers to the horizontal position. The keywords in this direction are left, right, and center. The second value specifies it’s vertical position. These keywords are top, center, and bottom.

Before CSS 2.1, you couldn’t mix keywords and numeric values. As of CSS 2.1 you can, however it is still best to not mix them if you can avoid them. It’s pretty easy to avoid them since left and top are equal to 0%, center (in both directions) is equal to 50%, and right and bottom are equal to 100%.

Here are a few examples:

background-position: left top; /* Puts it in the top left corner of the element. */
background-position: center center; /* Centers the image within the element. */
background-position: 50% 50%; /* Same as center center */
background-position: 50px 50%; /* 50 pixels from the left and centered vertically in the element. */

Also, percentage may work a bit differently then you might expect. The percentage value actually refers to the image and the element. For example, if you specify 50%, it will place the point 50% into the image at the point 50% into the element.

Let’s look at some real examples. Let’s say we have an element that is 500px by 500px. Let’s say our background image is 800px by 800px.

If we were to specify the background-position as “50% 50%”, which is centered in both directions, it means that it’s actual position would be (500 x .5) – (800px x .5) = 250px – 400px = -150px in both directions. If you have a negative value, it means anything that is within the negative area is not displayed. Here is an example image that illustrates how this becomes hidden:

Background Image with negative Position

Let’s take a look at a bit more complex example, just to make sure we have this down. Let’s keep the same example image and element sizes. We’ll set our background-position to “25% 30%”. So, that means our horizontal position will be (500 x .25) – (800 x .25) = 125 – 200 = -75px. Our vertical position would be (500 x .3) – (800 x .3) = 150 – 240 = -90px.

By default the background-position is set to 0% 0%, which is the top left of the screen.

background-repeat

The background-repeat property let’s us specify whether we want the background image to just be displayed once (no-repeat), repeat (or tile) it in the horizontal direction only (repeat-x), only in the vertical direction (repeat-y), or in both directions (repeat). These are the only four values that are permitted by background-repeat, except for “inherit” which simply takes the value specified by it’s parent. It’s default value is “repeat”.

Here is a quick table that shows your options, just for quick reference:

background-attachment

The background-attachment property only has two possible values: scroll and fixed. By default the property is set to scroll, which means that as the user scrolls the element (if it can be scrolled), the image will move with the rest of the content in the element. If the value is fixed, the image stays in the exact same position no matter what and won’t scroll with the window.

In this lesson we began talking about image backgrounds, and discussed the rest of the background-related properties (background-image, background-position, background-repeat, and background-attachment). In the next lesson we’ll discuss how to put these all together and some tips for using backgrounds to create nice looking pages: Lesson 5.3: Picturesque Backgrounds – Putting it All Together