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.

Posted by Melanie on 11/07/2011 | 7 comments

Comments

M & R Project
Posted by M & R Project on Nov 7 2011 5:03 PM
I liked the suggestion of the fire works picture. How can I get it to appear as my home page?
Matt Joiner
Posted by Matt Joiner on Nov 8 2011 5:38 PM
Like it! Mine isn't as transparant but it does the job! Thanks for being a great webhost. Love my service! www.mattjoiner.com
Jim Pollock
Posted by Jim Pollock on Nov 9 2011 1:01 PM
Can you only do this if using the Custom Style editor or can you update background on BZ templates too? Thanks!
Noise Floor
Posted by Noise Floor on Nov 9 2011 10:09 PM
this was very helpful! thanks for a clear, informative article! it really spruced up our site!
The Mouth of Ghosts
Posted by The Mouth of Ghosts on Nov 26 2011 3:18 PM
Is it possible to have a different background pic for each page? Seems like you can only have one background image for the whole website?
Speech Machine
Posted by Speech Machine on Nov 26 2011 6:12 PM
[quote="TheMouthofGhosts"]Is it possible to have a different background pic for each page? Seems like you can only have one background image for the whole website?[/quote] You can if you know HTML code. At the start of your page, in an HTML element, write in The image must be uploaded on the server. It is very specific and time consuming because the image needs to be the proper size. It also doesn't adjust as well to different monitor sizes. Mostly, when you make it look good on your computer, with out any scrolling necessary to see the whole image, it might cause scrolling on a smaller monitor. In other words, it looks better if you can use the Bandzoogle's template. You can see what I mean at my site. It's still under construction, but you can see I only wanted a background image on the front page.
Jise
Posted by Jise on Dec 10 2011 6:20 PM
Can i design a background for specific pages if im using a template?