PI7 CSS Fixed Background, Scrolling Text

PI7 has the capability to use CSS (Cascading Style Sheets) to control the appearance of web page backgrounds. In this tutorial, a small image is chosen as a non-tiling (fixed) background, positioned in the upper left corner of the web page, and the background is fixed so that the HTML text scrolls over it. You can see the page here.

In the past, only the IE browser would show a fixed background, but I'm happy to report that I was able to view this fixed background and scrolling HTML text in Netscape 6.1. However, older versions of Netscape may not "read" the fixed background correctly.

If you are interested in other tutorials on using PI to build web pages, you may want to check out my Component Designer Web Page, Web Album, Template Library Slide Show, Image Map, Web Page Edited With FrontPage, Vertical Scrolling Text and Images, Customizing a Web Page Template, Link Object Web Page, Remote Rollovers, Popup Menu and Basic Web Page tutorials.

It's very easy to use CSS to control background appearance in PI7 by selecting the right options in the Web Properties dialog box. Start by choosing File, New, New Web Page. I've created a web page 800 X 600 pixels with a white background. Make sure "Generate background" and Color (white) is selected.

make a new web page

Choose Web, Web Properties to open the Web Properties dialog box. I've gone over the content of these tabs with you before in previous tutorials, so fill those out as you wish. The important tab for this tutorial is the Background tab. Select "Image" and decide whether to use a Preset texture, a Background Designer texture your own background from a File. I've selected File because I'm going to use an image of my own.

background tab, css options

This image I'm using is one 275 X 395 pixels. If I used it as a background, it would repeat itself across and down the web page many times. You can see that it's already started repeating itself in the Preview window above. It would be very difficult to read text over this background. I only want it to appear one time, in the upper left corner of the web page, and I do not want text to appear over it. In fact, I want the text to scroll while the background stays in one place.

To accomplish this, I've selected "Using CSS" to control the appearance of this image as a background. Specifically, select Repeat=No-repeat and Scroll=Fixed from the dropdown lists. This will force the image to appear in the background one time only because it will not tile, and it will be aligned with the top and left margins. What is more, this background will remain fixed in place, and text will scroll over it. Click OK to close the Web Properties dialog box.

Uh oh, it looks like the background image is tiled all the way across the web page.

looks like it's tiled, but it's not

Don't worry, it just looks like this now. When you save your web page and view it in a browser, it will look exactly the way you want it to. Let's add some text to the web page. Choose Web, HTML Text Object to open the HTML Text Entry Box. It doesn't really matter what text you add, as long as it's sufficiently long to test the scrolling background effect. Type in your text and format it as desired, add links, etc. I've typed in a passage from my favorite children's story, "East of the Sun, West of the Moon," translated from Norwegian by Sir George Webbe Dasent in 1859.

HTML Text Entry Box, formatted text

Click OK to close the HTML Text Entry Box. The HTML text will appear in a bounding box with resizeable handles. Drag it over to the right, so that it's not on top of the background that will be showing in the upper left corner. Resize the the bounding box so that the HTML text falls into a tall, narrow area. Make sure the HTML text extends down below the image, so you can see the text scroll over the fixed background later.

Now it's time to save the page. Choose File, Save for Web, As HTML. When the Save As dialog box opens, save the web page to a folder on your hard drive. You should be aware that PI7 will automatically create an "images" subfolder and place the images on the web page into this folder. So when you upload the HTML page to your server online, make sure that you upload the files into the correct folders, or directories, or your images will not show up in your browser.

Here is the finished web page with the fixed background and scrolling text. Now that you know how it's done, you can try other images as fixed backgrounds, like this muted photo background.

This tutorial uploaded 4/04/02

Do not duplicate, translate, copy, archive, appropriate or redistribute this document.



Back to Homepage