Scalable Body Background Graphics

Skip past the menu

How to implement Scalable Body Background Graphics

Scalable Body Background Graphics[1] is a technique that uses CSS to allow a background image to scale up with the browser's view-port size.

The advantage of this method is that the web designer can design a single graphical image that can be used for the page or serve the entire site.

This can lessen the need to design multiple graphics and avoid some of the complexities of layout.

The result is a reduced HTML and CSS overhead. This may also have the benefit of lowering the cost of design.

Alternatively, site owners can themselves simply source a suitable graphic from a stock photo website or use Open Source images from Open Clipart or Wikimedia Commons.

The HTML

<div id="background_graphic">
	<div class="outer_wrap">
<img class="bg_image" src="images/my_image.jpg" alt="My Image" />
	</div><!--end outer_wrap-->
</div><!--end background_graphic-->

The CSS

#background_graphic{
	position: fixed;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#background_graphic .outer_wrap{
	position: absolute; top: 0; left: 0;
	width: 100%;
	height: 100%;
}
#background_graphic .bg_image{
	z-index: 10;
	min-width: 100%;
	min-height: 100%;
}

How it works

The containing div for the image, '#background_graphic .outer_wrap', is set to the dimensions of the view-port. The image is forced to expand to the dimensions of the '#background_graphic .outer_wrap' div with the use of the CSS 'min-width' property. The parent div '#background_graphic' prevents the image (using the CSS property/value, overflow: hidden;), from triggering the browser scroll bar. The parent div '#background_graphic' also maintains the image (using the CSS property/value, position: fixed;), in the view-port while scrolling the page content.

The '#background_graphic' div is placed after main HTML content. The main HTML content is in the '#container' div. Both divs are given the CSS property: selector of 'position: absolute;' so that the 'z-index' property can be properly applied. Both divs are placed from the top left hand corner. No height property is specified for the '#container' div so that the vertical scroll bar is correctly triggered when the length of the content requires it.

The main page content should be wrapped in a div with the attributes of 'position: absolute; top: 0; left: 0;', 'width: 100%;' and 'z-index: 20;'.

Creating the images

The images scale up better than they scale down. Choose a size that corresponds as close to the smallest view-port width of interest, e.g. 1000px. The height should be the width divided by 1.5, e.g. for a width of 1000px the height would be 666px.

Image dimensions that can be tried are:

  • W640px X H426px
  • W800px X H534px
  • W1000px X H666px

File sizes should be kept to around 50KB with 100KB as the absolute maximum. Remember, not all download speeds are equal.

The 1.5 ratio fills the view-port for displays with aspect ratios ranging from 4:3 to 16:9 and also when the browser is in full screen mode. Other ratios would require testing.

The height of the image will scale to the width so the bottom of the image may not be fully visible.

Keep the main focus or the elements of interest towards the upper part of the image. For example, in our 1000px X 666px image, the main visible part of the image would be above the 640px to 600px point. From that point the image could then be faded out the to the background colour of the HTML body.

Some browsers when first changing to full screen mode do not carry out a page refresh that would re-scale the background image. This means that the bottom edge of the image and the body background can become visible.

The best way to mitigate this effect is to fade the bottom of the image to the body background colour.

Accessibility is also important to consider when designing the background graphic. Try to avoid features within the image that may effect the ease of navigation and text readability.

Suggested technique for fading images to the body background colour

Use an image manipulation program such as GIMP, Paint.net or Photoshop.

  • Create two layers. One layer, the top layer, is for the image, the other layer, the bottom layer, is for the background colour.
  • Fading the image to transparent. Ideally the fade would start from below the visible part of the view-port and terminate at the bottom edge of the image. A Layer mask may be needed to accomplish the fade to transparency.
  • Fill the bottom layer with colour using a paint bucket tool. The tool colour should be set to the same colour as the HTML body background.
  • Merge the two layers and save to the required image format.

PNGs with alpha transparency can be used with no problem, To look natural the fade out to the HTML background colour has to be fully transparent before the image edge.

License

This document is free to use and distribute under the GNU Free Documentation License.

Gary Hollands - August 2010.

1. The Scalable Body Background Graphics Technique was inspired by and adapted from the GOTOCHINA website.

Background image from Open Clipart.

River Landscape