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
Comments

Using Measurement Values with the background-position Property

Measurement values are a powerful way to position your background images. They enable you to place your image precisely in any location you want. The syntax for using measurement values is very similar to the one you have just used when declaring keyword pairs.

When working with measurement values, you can work with several types of units of measure. My personal preference is to stick with either pixels or percentages. Generally, the site design layout I am working on determines the measurement type I will use. In these early examples, you begin by using pixel measurements in your background-position values.

When declaring the use of measurement values within your CSS rules—not just when using background images—you need to declare the unit of measure that is to be used. If you want the browser to render your background image 50 pixels from a given point, you need to type the value as 50px. The same holds true for all measurement types. If you use a percentage as a measurement, you might write your value as 50%. The following Captivate demo and steps cover using measurement values to position background images precisely:

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. Type 10 into the Horizontal position text box and ensure pixels is selected.
  10. Type 30 into the Vertical position text box and ensure pixels is selected.
  11. Click OK. Your image is now displayed to the co-ordinates you set (see Figure 2).
  12. Click the Show Code view button. Your CSS rule appears in the head of your page. First is the 10px horizontal value; second is the 30px vertical value.
  13. Click the Show Design view button.
  14. Save your work.
The background image positioned to the co-ordinates you set

Figure 2.The background image positioned to the co-ordinates you set

Page 4 of 6
Previous Page
Next Page