Greetings all:

I understand how the Page->Background properties work. You can either go with a solid color or use a image. Here is what I don't get.

If you select image it only puts it in the 400 width by 300 height. To have it show up completely on the background you have to tile. That works great if the image is not distorted in any way like a plain grain image. If it is a image that is distorted in any way it just creates blocks of them and looks like a checker board.

The image I want to use has random flame patterns in it that I want to fill the whole page with. I have tried several attempts with varied results that did not turn out the way I want to see it.

Example: By not using the background properties, I enlarged the image and then placed it in the layer of back so that my other images would be on top. When you go this route, it never displays properly when you view it in the browser.

The way I want this image to display is in full under the page background properties. Is there a way to force it as the full background instead of tile?

Any help on this would greatly be appreciated. I can even sind the jpg to anyone that wants to experiment with it.

Thanks,
Mike Cope

The simple answer is that there is no way to stretch an image to fit an entire page using HTML. A page background is only designed to place a single image somewhere on your page background or to tile it.

Enlarging the picture to fit the browser window would probably pixelate the image unless it was of a very high resolution. But a high resolution image would mean it is very large (byte-wise) which would take a long time to load. This is also not desirable.

A common practice is to use a solid color background that complements your image, then add the image to the background and adjust its position so it stays fixed (i.e., no scrolling allowed) in the center of the browser window. Since SiteSpinner only allows an image to be placed at the top left corner, you will need to use CSS code to position it at another spot. For example, to keep the image centered in the page, select the background image with the Page Editor and then enter the following into a custom header:

<style type="text/css">
body {
  background-position: center;
  background-attachment: fixed;
}
</style>