First, I think I broke the record on having the longest title thus far on our blog! YAY!

Secondly, when I read the write up on the Planetarium launch (opens new window) in January, I was slightly disappointed that there was no mention of the beautiful background image in the post. I think one of the awesome things about the site was the background and how it seamlessly repeated itself beautifully. I swore then on to dedicate a post solely on the background image.

Here's the Planetarium (opens new window) site. Drag your browser window to extend the width and take in the beauty of the background. Now we're ready to dive in the tutorial! Open up Photoshop and let's start!

STEP 1

(opens new window)

Pick your image for the background and put it in the mock, sizing it accordingly. In this case, we have a starry background.

STEP 2

(opens new window)

Establish the height of the background you want to work with. Our height for this one is 400 pixels. The bottom (silhouette of the mountain) happens to be black so we can use a solid black color for the background that we can repeat using HTML.

STEP 3

(opens new window)

Create a new document with the same height as your working background image. Your width should be three times the width of the sized-down background image. For our example, our canvas size is 400 x 3200. Manually size down the original background image 'til it replicates the background in the mock.

STEP 4

(opens new window)

Duplicate the image.

STEP 5

(opens new window)

Overlap the two images to create one image. Lower the opacity of one image to see where to sew/merge the image.

STEP 6

(opens new window)

Use the Eraser Tool with a soft edge to clean the background and erase any visible seam lines. When done, you will have one seamless image.

STEP 7

(opens new window)

Pick two identical points on your image. Use the margin to mark the beginning and end.

STEP 9

(opens new window)

Use your marquee tool and select the area. SHIFT + COMMAND + C to copy the selected image and click "OK". This image is what we will be repeating.

STEP 10

(opens new window)

To make sure that the image is truly seamless, go back to your canvas with the really long width. Hide the two layers which housed the two sized-down original images. Drag or paste the base image from Step 9 into the artboard area. Duplicate and put them next to each other and you should have a seamless image.

To be extra sure, you can test the image in a browser. Copy the HTML below and save it as test.html and open it in a browser. Make sure that you change the file name to the file name of your image and the path of the image to the correct path according to where you saved the .jpg of the background that you will be using.

Repeating Background
 body {
		background: url('starry-bg.jpg') top left repeat-x;
		height: 100%;
		width: 100%;
	} 

Hope this tutorial helps with your future seamless repeating background endeavors. 😃 If you end up using this tutorial, post a link here because I'd love to see your work! Peace and carrots!