Country Naturals, Celebrating The Simple Life  
Repeating Backgrounds  
line decor
line decor


This tutorial is for adjusting background images to give a smooth, continuous look to your web pages.


When creating a repeating image for a web page background, you can start with a tiny image, so it won't increase your page's load time. This results in a repeated image that may be too "busy" or choppy to look good. You may be tempted to use a much larger image to get a smoother effect, but that isn't necessary. With a little experimenting and this simple technique, you can have the best of both worlds -- a small image AND a smooth look.

Start with an image that's large enough to work with, like 50x50 pixels. (You can shrink it down, later.) Your goal is to simply turn your image inside out, so the repeats will match up on all sides when plugged into your web page.

.Here is our starting image -- a section of a photo of a wasp nest:

Wasp nest image, used for a web page background

If we used this image as-is, the resulting background would look like this:

Repeating background image

For a smoother background with a continuous pattern, here is the procedure:

1) Select your image. Copy it, flip it vertically, then paste it back underneath the original. Here's what you'll get:

Background image with vertical inversion

2) Select the new image. Copy it, flip it horizontally, then paste it back next to the original. Here's what you'll get:

Continuous background image

Here it is repeated.

Continuous repeating background pattern

Now you can shrink it, fade it, or do whatever else you want before plugging it into your web page.Here is what it looks like reduced to the original size of 50x50 and repeated:

Continuous, repeating background image

Here is the background image used for this page. It's a sample of my own knitting.

Knitting image for continuous web page background

For more graphics tutorials, please visit My Digital Fixation.


Easy, continuous loop fringe to crochet, using only chain stitch and slip stitch. Instuctions.

Knitting Background Image

Here's how to make seamless background images for your web pages.


Search Engine Optimization Copyright (c) 1995-2013
Susan Molthop
All Rights Reserved