Create and Use a Seamless Background Image

Create the image

This technique is 3D dojo's and uses Photoshop.

  1. Create a new document with square dimensions in RGB color mode and 72 pixels per inch with a white background.
  2. Add shapes to your layout but do not allow them to touch the edge of the canvas.
  3. Select all layers but the background color (white).
    • Duplicate the group.
    • While the group is selected, choose Filter->Other->Offset from the menu.
      • Slide the horizontal and vertical offsets to meet your needs (I chose the median of my canvas width).
      • Click Wrap Around from the check box list.
      • Click OK.
  4. Add other items or duplicates of your original shapes to finish the middle of the design. Stay away from the edges.
  5. File->Save the file as .psd so you can edit again later.
  6. Turn off the white background layer.
  7. File->Save for the Web.
    • Reduce size as needed.
    • Choose .png for true transparancy.
      • Watch the file size; it may be too big to meet your requirements.

Add the image to your Cascading Style Sheet (CSS)

body {background-image:url(seamless-bg1.png); background-color:#993300}

Remember that text cannot be easily read on a high-contrast background, so use other means such as boxes to provide a reading surface.

Variations