Band Website Design Tip: Make a repeating background for any screen size
Posted by Melanie Kealey on Jun 14, 2012 in: Website Tips
I have another design tip for you all today! Quite a few of you Bandzooglers have asked, “How can I get my website to fill the whole screen?” and in past posts we’ve talked about using a large background image that fades on the sides, or a seamless texture that repeats endlessly behind your content area. Here is another way to create a repeating background at the top of your page, which will make your site appear to fill the whole screen.
The trick is to create a background that repeats horizontally, while keeping your header image and content area within a set 960px wide space (which which fits perfectly on mobile devices with small screens). Here are a few examples, then we'll dive in.
You'll need a header image that is 960px wide and however tall you want (300px to 500px tall is a good guideline). Here is the Chinatown header on it's own, for you to see:
Open up your header image in a photo editing tool such as Photoshop or Pixlr.com. Then click Image > Canvas size from the menu at the top. From the pop-up, click the middle square, and then click in the top box to change the width field to 1280px. This will increase the overall width of your canvas (the background) while leaving the dimensions of your actual header image intact. You should see that it creates white space on the left and right side of your header image.
We'll start to make our background by filling in that space. Use the Marquee selection tool to click and draw an area to the left of your header image. Choose the color you'd like to use at the bottom left, and then the paint bucket, and click in the box you have drawn. This fills in the color, and you can repeat it on the right side as well.
When you've done this, click Image > Canvas size again from the menu. This time, click the square at the top middle as an anchor point for your canvas, and in the height box, increase your size by about 50px. This will represent where your menu bar will go. You should see blank space appear under your header when you click OK. Next, you can use the marquee tool again to draw around that blank space. Then choose a color for your menu bar, and use your paint bucket tool again to fill in this space.
Finally, we're going to go back to the top menu one more time, and choose Image > Canvas size again. We're making the content area color now, and you can set the anchor square in the top middle spot again, and add about 200px to the number in the height box, increasing your canvas once again. You should see a blank space below your entire image, which you can leave white, or fill in with a color as above. To pull the background image out of this, we'll take the marquee tool once more, and draw a box straight down, making sure to get some of each color, and not overlapping the original header image.
Choose Image > Crop from the top menu, and then save your work to your computer. I'll call it 'background-image.jpg' so it is easy to locate.
The last step is to get it working on your website! Log into your Custom Style editor in the Design and Options tab, and then choose the Header section. Here you'll upload the original header image. Then click the Page section, upload your 'background-image.jpg' stripe, and click on options to choose repeat: Horizontal. This will make your stripe repeat across the screen forever length-wise, to fill any screen. To fill in around it, choose a color in this Page section to match the content area (grey in my example).
Next, click your menu section further down, and choose the same color you used for that block of space just below your header. Finally, adjust the padding toggle in this menu area to match the height of your background image's menu area.
This should fill your page in perfectly - making even large screens seem fuller while making sure that the content will still be displaying on small screens. These styles are modern, clean-looking and really lets the band showcase their content. If you try out this idea, leave your website address in the comments below so I can check it out!
Build a stunning band website and store in minutes
- Promote your music on your own unique website.
- Sell music & merch directly to your fans. Keep 100%.
- Grow your fan base with built-in marketing tools.
Free 30 day trial, no credit card needed.
Comments