Repeating Background Images

Do you have the same background on each page? Do you want the image you're using for the background to load much quicker? Do you want to decrease the overall size of your site by using a little trick so you only upload one of those images instead of several of the same one? If you answered "yes" to each of these questions, this page should help you!

Following are the instructions for placing repeated backgrounds on your pages but only one image gets uploaded. By using this procedure you will reduce the overall size of your site and load those backgrounds almost immediately on subsequent pages! Full instructions are explained below - just follow along closely and you'll have a more streamlined site.

If you will be using an image from the Web Studio galleries, open a new site, drop the image, then preview. In preview, right-click on the background, click "Save Background as" then save it to your drive with a (short) name that you will recognize for it.

Part One - Creating a Repeating Background

  1. Add a page to your list and name it "images". It doesn't matter what the name really is because nobody will view the page directly. The instructions here use that name so be sure to name it "images".
  2. Drag an HTML Object on the page from the "Cool Stuff" gallery.
  3. Right-click on the Object, click Properties, then the "Attached Files" tab.
  4. Click "Add Files To List", browse your folders for the image and double-click on it. Your image should show in the attached files now. Note the name for the image - not the "C:\..." stuff, only the "imagename.gif" reference.

Part Two - Placing The Repeating Background On Your Pages

  1. The current background should be plain white - if not, right-click the current background then click "remove background".
  2. Right-click the white background and click "Properties".
  3. Click the "Page HTML" tab.
  4. Click the "Inside Body Tag" radio button.
  5. In that window, type (or copy and paste) the following code -

    background="images/imagename.gif"

    NOTE    : Change "imagename.gif" to the name of your image as shown in the attached list on your "images" page - the image referred to in step 4 of the first part. Use just the last part of the name, not the "C:\" and other stuff. Only use the name and extension. If the graphic name includes spaces, replace the spaces with underscores ("_").

All of your regular pages will show white backgrounds while editing the pages. The single, real image is still on the "images" page. When you insert the above code on your other pages, those pages will grab the image you attached to the "images" page and display it as the background. 400 Pages? No problem! This will work no matter how many pages you have.

If you're familiar with the program you could drop the image on the first page and simply refer to that in your code, but if you ever change the name of that first page you'll need to go in to each page again and change that code. It's not the best way to do it. Example - say the first page as it come up is "Page_1". That means when you drop the background the code you would need to put in the body tag on every other page would be -

background="Page_1/IMAG0000.GIF"

That's fine, but if it's your index page and you change it later to "This is my page - I hope you like it", that means your code - on every page - would need to be changed to this -

background="This_is_my_pag/IMAG0000.GIF"

Using a dedicated page for your repeated image gets away from all the changes you would have to make every time you changed the name of the page the actual background image was dropped on. Don't even bother with that - it's not necessary!

If any problems just send me an email. Once you get the hang of it I believe you'll appreciate the benefits of this procedure. Try it on a "new" site to get it right.

Bye now!

~ swipesy ~