Using Multiple Backgrounds for Flexibility in Web Design

If I’ve learned anything during the past few years as a designer, I’ve learned that you can always learn new tricks to solve common design challenges. One of the most common design challenges is creating a customized background that expands and contracts to accommodate varying browser heights. In cases like these, repeating background elements such as stripes or tiled patterns will not meet the need. The most challenging aspect of the task is that every page will most likely be a different height. You could design your background to fit the height of one page, but a rigid, static background image is not going to accommodate shorter pages such as your contact page.

You could simply hope that nobody will notice backgrounds that cut off or abruptly stop partway down the page, but background glitches are hard to miss; despite technically being in the background, they stick out like a sore thumb. One viable solution is to create a background image for the top portion of your site and a separate one for the footer area. As long as you keep your file sizes small and you don’t make either of these elements extremely tall, this can work well for quite a few designs. Note that the combined height of your two background images should not be taller than your shortest page.

However, limiting yourself to two background images means that the extensible middle-ground of your background has to be either a color, a CSS3 gradient or a repeating image, which doesn’t work for all designs, and in some cases leaves you with the same problem that you started with. But, with a little CSS know-how, you can add a third background image in between your first two while maintaining the same extensibility and keeping your overall design intact.

Step 1: Create a Seamless Background

In Photoshop, I created a document wide enough to fill a browser, and I filled it with a sky blue color.

Step 2: Choose a Gradient

For added effect, I added a new layer on top and chose white as my foreground color.

Step 3: Subtlety is Key

I selected the gradient tool, selected the foreground to transparent option, drew a reflected gradient in the center of my canvas and lowered the opacity of this layer to 15-20%.

Step 4: Merge and Crop

I merged both layers together. Then, I chose the single row marquee tool and made a selection.

Step 5: Save Your Repeating Image

I went to Image> Crop to create a wide image that is 1px tall. I saved this for web as a .jpg file named “sky.jpg.”

Step 6: Find Your Imagery

I went online and found an image of grass.

Step 7: Creatively Crop What You Need

I brought this image into Photoshop and cropped it so that it wasn’t too tall.

Step 8: Blend Your Image With a Mask

I added a layer mask and used the gradient tool to fade the top of the grass to transparency.

Step 9: Apply Your Mask

I right-clicked the mask icon and chose “apply mask” to merge it with the image.

Step 10: Save For Transparency

I saved for the web again, but this time I chose png-24 with transparency, so that the top could fade away.

Step 11: Set a Contrasting Background

For my last image, I created a new Photoshop document, made it around 200px tall and filled the background layer with a sky blue (just for visual reference).

Step 12: Use Custom Brushes

There are many places online where you can download custom brushes, so I found some custom cloud brushes, chose white as my foreground color, created a new layer and began painting clouds on the new layer.

Step 13: Stay Away From Edges

I made sure not to get too close to the bottom edge so that there would be no harsh lines breaking the effect of the clouds. I deleted the background layer, only leaving the clouds on a transparent background. I chose File > Save for the Web and Devices, and I saved this file as a png-24 with transparency as well.

I left the blue background layer on so you could see the clouds, but be sure to delete the blue background layer.

Step 14: Putting it All Together

Now, with a little CSS magic, I can use these images to create a grassy, cloud-capped background that fits every one of my pages perfectly. I have created a dummy site for a lawn care company to show you how to apply this technique. We can call all three background images using CSS: the grass centered at the bottom, the clouds centered at the top and the blue sky filling the varying height in between them. Use the background method to set the background attributes of your site as you normally would, but in this case, pay close attention to order. The way you order these three background images will feel similar to layers in Photoshop.  The first item you call will be the image closest to you, and the last image that you define will be farthest back. In the case of this project, I defined the grass first and the clouds second, because in a real scene, the clouds would disappear over the horizon, which for our purposes is represented by the grass. In other words, clouds shouldn’t have the opportunity to go in front of the grass, because that wouldn’t look realistic. Both images are set not to repeat, and the grass is aligned to the bottom, while the clouds are aligned to the top and they are both centered.

Step 15: Order is Essential


body {
background: url(images/grass.png) center bottom no-repeat, url(images/clouds.png) center top no-repeat, url(images/sky.jpg) center top repeat;
font-family: Arial, Helvetica, sans-serif;
color: #060;
text-align: justify;
}

Step 16: Stack Your Images Correctly

The third and last image defined is the “sky.jpg” file, which is centered and repeated on its y-axis. This ensures that no matter how tall a content page is, “sky.jpg” will bridge the gap, while the clouds and grass decorate the top and bottom respectively. The result is a seamless, dynamic background design that fits every page.

Important Things to Keep in Mind

I can’t show you this without talking about the downsides of this method. It gives you another creative option for your web design projects, but one major downside to this method is that you are using three seperate images to create your background, which can lower your site speed due to the addition of multiple large graphics. You are likely using a .jpg and two .png files, or perhaps three .png files, which tend to be larger than .jpg files. Another factor to consider is the height of your three images, because if they overlap on an unexpectedly short page, they can ruin the look of your site. Getting the image heights right might take time and multiple trials and errors, but if your clients or colleagues insist on a complex, scalable background, they should expect it to take a little longer than a standard, simple one.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://iamnatalia.com Natalia Ventre

    I think that’s the kind of design that looks great on Photoshop but has many issues in the browser, I mean, what would be the background alternative for browser that don’t support multiple backgrounds?

  • http://www.edmi.ca Amin

    Great tutorial. I’ve seen sites where the background image will scale according to the size of the browser window. See this example: http://www.elegantthemes.com/preview/Memoir/

    Any ideas on how they achieve this?

  • http://www.sleekinteractive.com Michael

    I stay away from this technique because of browser support

    I would put the sky as body background and put the grass as a footer background with the z index lower than main page container and use margin-top:-300px or whatever the value needs to be. This way you get same results in all browsers

  • http://mitchpowell.com Mitch Powell

    I think I’ll be able to make this technique work for my ocean wave background I’ve been fiddling with. Excellent idea to break it up into top, middle, bottom kind of thing. Thank you for the great idea!

    P.S. The system here, when I tried to submit this, said “You are posting comments too quickly. Slow down.”

    P.P.S. (this is the one and only comment I’ve made; and the ‘Submit’ button is greyed out.)

  • batty13

    @natalia

    You would use a {if lte IE 6} syntax to serve them a both generic background color and background image.

    There is no reason to sacrifice a good design if it is appropriate for the site’s goal and or it’s target audience. The rest of the world should not have to suffer because some bloke wont upgrade/update.

  • http://sawmac.com/ Dave McFarland

    Multiple backgrounds are only supported in IE9 and up, so you need fallback for IE8 and earlier

  • Mukta

    Multiple backgrounds are supported by the latest versions of Firefox, Chrome, Safari and Opera. It will be supported in IE9, too.

  • http://www.spiraleye.com Timothy

    Do you have an demo page?

    Would be cool to combine this with http://designfestival.com/the-cicada-principle-and-why-it-matters-to-web-designers/ to make less repetitive clouds / grass!

  • http://sperling.com tedd

    Nice technique. But why do you have:

    font-family: Arial, Helvetica, sans-serif;
    color: #060;
    text-align: justify;

    in your body declaration? It doesn’t have anything to do with your example.

    Cheers,

    tedd

  • Manish

    No! we won’t support IE6…

  • Jan

    I do this all the time. It is very easy to make backgrounds. Basically, almost on every picture where I need something special I do my own backgrounds

  • http://gregorywendt.com greg wendt

    This is cool, I’m playing with it now. 2 issues, How wide to make the images–as many are on wide-screen monitors these days, and how to avoid repeating sky image to not appear below footer on longer pages.

  • Jerry

    This is something I’ve wanted to do a long time. Could you put some recommended “sizes” on your pictures as a frame of reference?

  • Irfan

    What browsers support multiple background images?

  • http://www.debbshosting.com Debbs Hosting

    I think this is one of the most difficult things to adjust when designing. I have had problems with that the first time I designed a website for a friend. It was annoying even if you put those plugins they say can help you solve that. Will the adjustments be made only on the CSS or also on the resolution of the background to be used?

  • Wilma

    To Amin: scale background image with jQuery backstretch, examples http://www.troostmomenten.nl and http://www.carolinedewin.com