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, 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):

band website background

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 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).

Image editor band website background

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.

website background idea

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:

band website backgrounds

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.


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 Band
Posted by Matt Joiner Band 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!
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.
Posted by Jise on Dec 10 2011 6:20 PM
Can i design a background for specific pages if im using a template?
Posted by SGT Bob on Apr 25 2016 10:51 PM
Yeah, there is no place to add a background image, so this is not helpful. If there are only certain kinds of templates that allow this it would be good to know this. The BandZoogle "Help" is equally as uninformative. :( Spent 4 hours trying to add a damn background image to my site. I could have programmed the entire site in ColdFusion in that time.
seo plugin
Posted by seo plugin on May 7 2016 1:20 AM
Hello Web Admin, I noticed that your On-Page SEO is is missing a few factors, for one you do not use all three H tags in your post, also I notice that you are not using bold or italics properly in your SEO optimization. On-Page SEO means more now than ever since the new Google update: Panda. No longer are backlinks and simply pinging or sending out a RSS feed the key to getting Google PageRank or Alexa Rankings, You now NEED On-Page SEO. So what is good On-Page SEO?First your keyword must appear in the title.Then it must appear in the URL.You have to optimize your keyword and make sure that it has a nice keyword density of 3-5% in your article with relevant LSI (Latent Semantic Indexing). Then you should spread all H1,H2,H3 tags in your article.Your Keyword should appear in your first paragraph and in the last sentence of the page. You should have relevant usage of Bold and italics of your keyword.There should be one internal link to a page on your blog and you should have one image with an alt tag that has your keyword....wait there's even more Now what if i told you there was a simple Wordpress plugin that does all the On-Page SEO, and automatically for you? That's right AUTOMATICALLY, just watch this 4minute video for more information at. Seo Plugin seo plugin
Comments on this post are disabled.