In this installment of my Beautiful Blog blog design series, I will teach you how to make a blog background by using a tiny image that tiles seamlessly on your blog.

That little icon repeats itself again and again, according to the browser size, creating my background. The thing is, it needs to be done in a way that it will not look as if it’s tiled. It sounds complicated, but creating this takes just a few minutes.

The reason you might want to do this is to add to your branding. Make sure that you aim for something that blends in with your blog and branding, and keep it from being overwhelming.

The technique I provided uses Photoshop.

What size to make your tiled image:

When talking about designing for a website, we will talk in pixels. This is the actual physical dimension of your image.

The weight of your image (how much memory it requires) is measured in bytes, or in our terms kilobytes (K).

Pay attention to both of these measurements. When you create your image, you will need to decide on pixel dimensions. Smaller pixel dimensions will usually carry less weight (there are other factors involved, but this is the easiest for you to change). While you’ll want a smaller pixel dimension to help your site load faster, anything less than 1K will not necessarily load faster and may just take longer to load, as it needs to tile more times.

I like to start with a larger area than I need so I can see what I’m doing as I work. You can always resize later to a smaller dimension. I worked with 300 x 300 pixels and made it smaller later.

How to Make your Blog Background:

Step 1: Create a new file and fill it with your background color. Or, you can leave it white as I’ve done on my blog.

Step 2: Design your pattern. I will show your more examples of the single image vs. the tiled background below so you can get a better idea of the result.

Create your pattern using simple shapes, such as lines, circles, and such. In Photoshop you can use brushes. There are some really cool brushes available online, just Google the shape that you’re looking for.

Make sure to steer clear of the edges while doing this step.

If you are creating a pattern such as stripes or plaid, the rules are slightly different. You need to make sure you are using straight lines (in Photoshop, clicking shift while painting creates a straight line). Then it should line up okay. You should also draw your lines until the edges. You may want to follow the next steps just to be sure, but you can skip to step 5 and test your tile.

Step 3: This is where Photoshop comes in handy:

Go to Filter –> Other –> Offset

You want your design to be split with an even cross in the middle and wrapped around the edges. So make sure to choose the wrap option. Your numbers should be set to half the size of your file. (If you did 300 like me, both sliders should be set to 150). If you have your preview on, you’ll get a better idea if you’re doing it right.

This is what happens:

You can see that the 4 corners were placed evenly on the edges.

Step 3 alternative: If you are not using Photoshop, and you don’t have the offset filter:

Copy your image in step 2 four times arranging it so that the corners touch.

Crop your combined image to the same size as your original was, exactly in the center. It’s important to be exact!

Step 4: Fill in the empty spaces in the middle that used to be the edges of your image.

This is your image! You can now resize it to your desired size, as measured in pixels.

Step 5: If you’d like to get an idea of how it would look WITHOUT uploading it to your site first, select your image and go to edit –> define pattern.

Create a new document. Choose the paint bucket tool and on the top toolbar choose the dropdown that says “foreground” and choose “pattern”. In the pattern menu, choose the icon you just created. Click on your new document and it will tile that image.