SiteSpinner Pages: Full Page Background

The Elusive Full-Page Background

May 30th, 2010

The following was inspired by the article, Perfect Full Page Background Image, by Chris Coyier at CSS-Tricks.com.

As you may know, either from experimenting or by searching the Web, getting a full web page background is next to impossible. The main problem is the HTML <body> element does not allow you to specify the dimensions of a background image, nor does it support background image resizing. Can this really be accomplished? Yes, but with varying results. The trick is to not use the image as a page background; instead, add it to a container object that resizes itself as the browser window resizes.

In SiteSpinner, this can be accomplished by:

Place the desired image on the work page and align the top and left edges of the image to the top and left sides of the work page.
Resize the image to the same dimensions as the project’s target resolution by dragging the right and bottom control handles. Do not use a corner handle as this will proportionally resize the image.
Using the Arrange toolbar, set the image to Relative Horizontal Sizing and Relative Vertical Sizing.
Make sure the Options—>Project Options—>Advanced tab’s “Set <img> as 100% width/height of object <div>” is checked.

When you preview the project, you should see that the image automatically resizes when the browser is resized. But you should also see a few problems with using this technique.

The image does not retain its aspect ratio, so the image will stretch to fit the window rather than being proportionally scaled.

Aspect Ratio

The aspect ratio of an image is a measurement of the width in relation to its height. For example, an image with a dimension of 800×600 pixels has an aspect ratio of 4:3. This means that for every 4 pixels of image width, there is 3 pixels of image height. To scale an image so that it is not distorted, you need to increase the width and height by this aspect ratio. For our 800×600 pixel example, this is accomplished by multiplying the width and height by 1.33 (4/3).

Unfortunately, CSS does not allow you to use math operators, so it is only possible to scale an image by a set percentage. In addition, when you resize a browser window, the aspect of the window can be changed to any value when you drag the resize handle. Thus it is not possible to maintain the exact aspect ration of the image inside the browser by using just CSS.

The image does not center itself inside the browser window; the anchor point stays fixed at the top-left corner of the browser.
In some browsers or on a slow computer, you may see a temporary white border at the right and/or bottom edges as the browser is resized. This can be circumvented by adjusting the image on the work page to just a bit more than the target resolution, but at the cost of adding scrollbars to the browser when the page is viewed.
If SiteSpinner page centering is enabled, the image fills only the centered content wrapper and not the entire web page.

If we add our own CSS to the page, we can get a bit closer to the solution:

Place the desired image on the work page. No need to resize it for this method.
Open the Geometry Editor to the Options tab and in the Code field enter: class=’bg’
Open the Object Editor to the Transformations tab and check the box labeled “No CSS Positioning.”
Open a code object, set the code placement to “in CSS,” and enter:

img.bg {
/* Set rules to fill background */
 min-height: 100%;
 min-width: 1024px;
/* Set up proportionate scaling */
 width: 100%;
 height: auto;
/* Set up positioning */
 position: fixed;
 top: 0;
 left: 0;
}

This method works with SiteSpinner page centering enabled in all browsers except IE. This is because IE does not recognize a CSS position attribute of fixed unless it is “standards-compliant” mode. Unfortunately, SiteSpinner outputs a transitional “quirks” mode web page using a DOCTYPE statment of:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Tranisitional//EN">

To place the SiteSpinner generated web page into a standards-compliant mode, you will need to manually edit the web page to remove the “Transitional” word so the statement looks like:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

After this change is made, the techniques will work in IE also. This may be a less that desirable solution, but it is easy to implement and may suit your needs. But searching the web revealed a better method and one that takes only a little bit more effort. You can read the entire article, Perfect Full Page Background Image, at CSS-Tricks.com.

Script Solution

If you want a Javascript solution, then you can use a jQuery plug-in called Backstretch developed by Scott Robbin that can be downloaded here. After downloading and unzipping the file, you will need to upload the jquery.backstretch.min.js file to your server. While you’re uploading files, upload the image you want to use for your background also; you’ll need it for the script to work. If you want to preview the page, then copy the script file and image into your preview directory.

Implementing the script is very simple. Open a code object, set the code placement option to “Header“, and enter:

<script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript" src="scripts/jquery.backstretch.min.js"></script>
<script type="text/javascript">
  $.backstretch("image/bird.jpg");
</script>

Change the name and path of the image in the script to your image name and location. The script works very well, but you may find the script responds slower than using a CSS method.