Make a great music website background part 3: Creating different backgrounds

In this post, I'd like to dive into something a bit more advanced. I will show you how to add a different background image to each page of your Bandzoogle website pages using CSS. It sounds trickier than it is, and I will walk you through each step!

If you want to add different backgrounds to your pages, the first step is to assemble them. I'd recommend making sure they are similar and not too splashy (we want the background of your page to complement your entire website, and not take away from your content too much). I'm going to use a different colored gradient as my background on each page, and here they are (scaled down):

Now that you have your backgrounds ready, we will add them one at a time. First, upload each image that you want to use into your File Manager by clicking Design and Options - File Manager and choosing the Browse button.

When you click on a file uploaded here, a link will pop up that you will use in your code. For easy access, I'll copy all my background file links to a Notepad document.

Your Home page will take on the background you have already set in the custom style editor. To add this, click your Design and Options tab, and then Custom Styles. In the Page section click Change and upload your first background.  Here's another article if you need more help with the background section of the Custom Style Editor.

Now let’s change the background of your other pages! This part will be done in your Edit Pages tab, so click Edit Pages, and choose on your second page from the left hand list. Then click Add Feature, and choose HTML. Click in the HTML feature and add the following code:

This will tell the page you are on where you’d like to load the background for that specific page, so replace http://mydomain.com/files/example.jpg in the example with your own background's url (which you just uploaded to your File Manager). Make sure these file names don't have any spaces, or they may not work in all web browsers.

Now back in your Edit Pages tab, repeat this - choose Add Feature, HTML, then paste in the same code and replace the link with another different file link. Preview your pages to see what you have created!

If you are trying to change your background but you are using a template, not a custom style, you'll replace the image file by going to the bottom of your Design and Options tab and clicking on the CSS section. Highlight the link after background-image: url like below:



To replace it with your own background, paste in your background image's url like this:



Then click Update Stylesheet, and your template will take on the new background (this works better for some templates than others).



Good luck with your custom backgrounds - I'd love to see some examples at work!