Dreamweaver Article

Working with Background Images and CSS – Part 1: Using Repeating and Non-Repeating Images

Setting a Repeating Background Image

For the most part, you'll be working in the Code view in this tutorial series. Please don't let that put you off. You can use the CSS panels to complete the work if that is your preferred workflow. By working in the Code view, you get to see the code. If you get to see the code, you learn the code. As far as code goes, CSS syntax is very easy to learn. The syntax is very consistent as you will see as you progress through this series.

CSS syntax is written as follows:
Selector {
property: value;
}

Remember that terminology. You will see it used a great deal in this series.

In this article you will be concentrating on becoming familiar with CSS and background images. For the sake of simplicity, you will therefore be working exclusively on the body element. Background images can, of course, be deployed on many elements. For now, working with the body element suits us just fine.

That said, open the repeat.html file in Dreamweaver Design view. Remember, you can create your pages as you work along or read through the code contained in the sample files linked from the beginning of the article. The following movie and steps demonstrate how to create a repeating background image:

• View the movie: Creating a repeating background image

Follow these steps:

1. Click the New CSS Rule button.
2. Select the This document only option.
3. Select the Tag option.
4. Select body from the Tag pop-up menu.
5. Click the OK button. This opens the CSS Rule definition dialog box.
6. Select Background from the Category list.
7. Click Browse, navigate to bg.gif, and select the file.
8. Select Repeat from the Repeat pop-up menu.
9. Click OK.
10. Click the Code view button. Your CSS rule appears in the head of your page.
11. Click the Design view button.
12. Save your work.
13. Press F12. This opens your browser and loads the page. The image repeats throughout the page (see Figure 2).
14. Minimize your browser.
15. Press F11 to open the CSS panel.
16. Select the body rule in the CSS panel.
17. Click the Edit Style Sheet button.
18. Delete the repeat value from the Repeat pop-up menu.
19. Save your work.
20. Press F12 to preview your page. The background image still repeats. Repeat is the default behavior and does not have to be declared.

Figure 2. The background image repeated across the body element

When you set a background image to repeat the image is only called once; the CSS rule then decides how it is to be handled. In this instance the CSS rule calls for repeat and no axis has been given. A lack of a declared axis dictates that the background image is repeated in the x- and y-axis by default. You will learn more about the x- and y-axis as you progress through this tutorial series.

Page 3 of 5

Previous Page

Next Page