Static images using available space on fluid pages

This page is intended to show some techniques for dealing with helping images that are smaller than the width of the page to use the remaining available space. If you know of any other good methods for doing this, please email me on nrkn at nrkn dot com.

  1. Seamless tiling, automated
  2. Seamless tiling, manual
  3. Fade to background colour
  4. Fade to background image
  5. Rightmost edge repeats
  6. Motion blur to background colour
  7. Reflection fade

Seamless tiling, automated:

This was created using the seamless tiling facility in Paint Shop Pro.

Top of page


Seamless tiling, done manually:

This was created by laying the leftmost edge of one copy of the image over the rightmost edge of another copy of the image and then selectively removing sections of the top layer so that they appear to join seamlessly.

Top of page


Fade to background colour:

Top of page


Fade to background image:

If you use PNG to do this, you can take advantage of PNG's alpha transparency to lay the same picture over any tiled background.

Top of page


Rightmost edge repeats:

This can be a very useful technique but does not work particularly well with the image above. A much better example of this technique using a more suitable image can be found at the top of this page.

Top of page


Motion blur to background colour:

Once again the example image does not particularly suit this technique. A much better example of this technique using a more suitable image can be found in the banner at the top of this page.

Top of page


Reflection fade:

This is a horizontal reflection fade, this effect is more visually impressive when done vertically (which is outside the scope of this example):

Top of page


Back to nrkn | HTML 4.01 Strict / CSS