Create a hovering CSS background

1. Home
2. ASP
3. Create a hovering CSS background

Have you ever visited the GeoCities Web site using a DHTML-compatible browser such as Internet Explorer 4.0 or Navigator 4.0? Did you notice the little logo hovering over the page in the lower-right corner? When you scroll up and down, it keeps its position.

That trick involves a background image effect you can get by using Cascading Style Sheets (CSS). With FrontPage 98 it's a cinch to do:

1. In the FrontPage Editor, right-click the current page and then select Page Properties from the pop-up menu.

2. In the Page Properties dialog box under the General tab, click the Style button. On the Style property sheet, select the Colors tab.

3. In the Background Image field, either type in the location of the image you want to use or click the Browse button to locate it with the file selector.

4. Next, direct your attention to the four drop-down fields to the right of the property sheet. In the Attachment field, select Fixed. This will keep the graphic in a set position on the page. (Otherwise it will scroll along with everything else.)

5. In the Repeat field, select No Repeat so that the image won't tile over the whole page.

6. Finally, in the Vertical and Horizontal position fields, select where you want your image to be located on the page. For our example, select Bottom for vertical and Right for horizontal.

After you click a couple of OK buttons, you will see your image tiled in the background of the current page in the FrontPage Editor. Don't worry, you didn't mess up anything. It's just that the Editor doesn't let you preview DHTML content, so you'll have to switch over to Preview mode (or preview the page in your browser) to see the trick in action.