Back at Pawsome Pages we explained how to put a banner on your page with just a few lines of code. Now we have a different method which must be use when you use the Frame_ID script. Why? The script for the banner and the Frame_ID scrpit will fight over the same spot. The Frame_ID always runs after the banner script so it will erase the banner.

The banner will be the background in the #topFrame. You can also put a banner in the #bottomFrame if you like. There are some behaviors you should be aware of with banners.

• The maximum width of a banner is the same as the maximum width of the #contentTable, 644 pixels. You can use a wider banner, but only 644 pixels of the banner width will show up. The rest will be cut off.
• You can make the banner less than 644 pixels. We'll show you how to center it on your page.
• The height must be set. It will default to 22 pixels if you do not define it. The height can be anything between 1 to several hundred pixels. We usually make our banners between 50 and 175 pixels high.

Let's add this banner to Callie's page with the simple profile background.

The code we will use in our style sheet is as follows:
#topFrame { background-image: url(http://my.photobucket.com/lemonadeSign644.gif); height: 52px; }

Banner number 2 can be placed at the bottom of your profile.
We are going to use this image for our bottom banner:

The code is very much the same as for the top banner. Make a copy of your #topFrame and do the following:
1) Change #topFrame to #bottomFrame.
2) Change the url name for the new image.
3) Set the height to 140 pixels.
The code we will add to our style sheet for the bottom banner will be as follows:
#bottomFrame { background-image: url(http://my.photobucket.com/Thx4Stopping.gif); height: 140px; }

Now our page look like this with a banner at the top and one at the bottom:

So what to do if your banner isn't 644 pixels wide? What if it is only 550 pixels wide? Just "center" it!

Here is the banner we are going to demo with. It is 470 pixels wide and 72 pixels high. It also has a transparent background so only the lettering is visable.

If we use the above code method with this banner it will look like this on the page:

As you can see the image starts on the left and has tiled.
First we are going to center our image in the #topFrame area by adding this property... background-position: center center;

The first "center" value is for horizonal placement and the values of "top", "center" and "bottom" are valid. The second "center" value is for vertical place and the valid values are "left", "center" and "right".

Next to remove the tiling we will use this property... background-repeat: no-repeat;

So our style sheet code for the top banner will look like this:
#topFrame { background-image: url(http://my.photobucket.com/SweetLemonade470.gif); background-position: center center; background-repeat: no-repeat; height: 72px; }

And the banner will look like this on our page:

Finally if you don't like the look of the transparency against your background, you can add a background color like this... background-color: #f7dd77;

To go to Pawsome Pages, click on the cat for the Catster side and on the dog for the Dogster side.