Accessibility

Dreamweaver Article

 

Working with Background Images and CSS – Part 2: Placing Images with Precision


Table of Contents

  1. Introduction
  2. Using Shorthand for CSS Rules
  3. Using Multiple Keyword Pairs
  4. Using Measurement Values with the background-position Property
  5. Introducing the background-attachment Property
  6. The Syntax of Background

Using Multiple Keyword Pairs

In Part 1 of this series you created a background image that you could use to test out the selectors that you wrote. You will continue to use this image in this part. In Part 1, you also learned how to use keywords to position your background images. Specifically, I reviewed the following keywords:

  • top
  • right
  • bottom
  • left
  • center

Although these values enable you to position your background images, they don't offer a great deal of variation when used on their own. This can be a little limiting. To use background images and to get the most out of them, you need to gain greater control over where you can place them—which is what I will show you in this part of the tutorial. After you have completed this part, you will be able to place your background images wherever you need them.

Note: If you haven't defined a site in Dreamweaver yet, do so now. If you need help defining a site, see "How to Define a Site in Dreamweaver" (TechNote 14028).

To begin, you will start to work with multiple keywords. Start by revisiting the positioned.html page you created in Part 1 of this series. Open that page in Dreamweaver. Switch to Code view and you will see your embedded CSS in the head section of the document.

Note: You are only using embedded CSS for ease of presentation in this tutorial. In a real-world scenario, you would externalize your CSS rules in a separate file. Doing this provides global control over your documents.

First, you will learn about combining keywords. You have already used the bottom keyword and you have used the right keyword. But what if you want your background image at the bottom right of your page? The following Captivate demo and steps demonstrate how to achieve this:

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 no-repeat from the Repeat pop-up menu.
  9. Select right from the Horizontal position pop-up menu.
  10. Select bottom from the Vertical position pop-up menu.
  11. Click OK.
  12. Click the Show Code view button. Your CSS rule appears in the head section of your page.
  13. Click the Show Design view button.
  14. Save your work.

By using the combination of the bottom and right keywords, you have more flexibility over the placement of your background image. Try repeating the process you have just completed and change the keyword, enter background-position: top right; and preview your page again to check the results. You may need to refresh your browser to force the update. You can, of course, use any combination of keyword pairs to place your image where you would like it to be.

Although this provides you with greater flexibility to position background images, there is still a lot of the browser's window area that you can't place your image. This is where measurement values come into play. I review this technique in the next section.

Page 3 of 6
Previous Page
Next Page