Behind the Scenes – Make a great background for your website!

There is an art to creating the perfect background image – something that matches your website, your musical style, and that is eye-catching, but doesn’t stand out so much that it takes away from focusing your visitors on the content of your web pages.

In this post I’m going to show you how to make a background image for your website that will appear full screen on most screen sizes.

The Big Picture

The first step is finding an image that you want to use for your background.  If you decide to go with a large image, perhaps your most recent CD cover, or other artwork, the next step is to make it fit so that it looks good on all screens.

In an image editor like pixlr.com, choose "open an image from your computer", and upload the image you’d like to use for your background. I chose this guitar on a brick wall image (after I gave it a run through Pixlr-O-Matic to add some fun effects):

Keeping in mind that some people will have higher resolution monitors though, I am going to make it work for them, too.  Here are a few of the tools I’ll be referring to in this post.

First, we will open the image in the pixlr.com image editor (choose open photo editor and then open image from computer, to find your file), and set it to be 1280px wide.  To do this choose Image – Image size from the menu at the top of the page, and adjust the toggle.  This will reduce our image to a good size to appear on most screens (it’ll be just about full screen for my monitor).

Now to take care of the wider screens!  Choose Image - Canvas size from the top menu to increase the canvas – a blank area to the left, right, and bottom of your image.  I increased the overall size to 1600px wide and 1200px tall.

You should see bars of white around your image.  I decided to fill these in with a navy color.  I chose Navy in the color palette at the bottom left. Next, I picked the marquee tool and selected the white areas with the marquee tool's box.  Using the paint bucket, I filled them in with a navy color.

This doesn’t look too bad now!  You can take it one step further if you like, and make your image fade at the sides.  To do this takes a bit of trial and error, but it can be worth the effort.  First, use your marquee tool to draw a rectangle down across your image at the edges, making it about half background color and half image. Then choose the Gradient tool, and click “Gradient” near the top menu. Choose the third gradient option in, which fades from a color to being transparent. 

To match your background, click the little squares on each side of the gradient and then the color box to choose your color.  I made both sides of the gradient squares the same navy.  As soon as you click the color box, the eye dropper will appear and you can sample your navy color by clicking the eye dropper over your navy background bars.

Now in your selected box, draw your gradient across, stopping just before the edge.
 

I did this a few times, not drawing it quite all the way across, until my edges looked nicely faded.  Repeat on the other side, and the bottom, then save to your computer by clicking File - Save.

Now to see how it looks in our custom style!  In your Design and Options tab, upload it to your custom style in the Page section.

Here is how our background will look on different screens:

I hope this inspires you to make your own background!  Leave a link to your website in the comments; I'd love to see some of your creations. Next time, I'll show you how to make a background using a repeating, seamless texture.