I like pixels.

Stuff by John Clifford

Multiple Backgrounds – From Design to Code

Design to code

Using multiple backgrounds with CSS is probably my current favourite thing to do when starting a new site, mainly because it can allow you to concentrate your styling efforts on solutions that keep you within the confines of whatever layout technique you decide to go with (grids etc.) and avoid extra markup.

The reason that I use multiple backgrounds in my CSS is to avoid one of the annoyances that comes with using a grid system/layout framework; to create a page that has a full width header and footer background, quite often you need to leave the confines of the grid system. I’ll show you how I started development of my site and avoided this problem (developing the design of my homepage into the first stage of production code). Feeling particularly lazy? The final demo of the code can also be found here!

Technique

We simply need to replace all of the things that would need a full width element to style, with one/multiple backgrounds on our body.

In this design we can see we’ll need to replace the following full width sections:

– Large central image
– Red navigation bar
– Sticky footer
– Grey area

The Rules

The CSS for multiple backgrounds is pretty much the same as for single ones, you just pass a couple of extra parameters depending on how many backgrounds you are dealing with. The order of the parameters is important too.

background-image: url(topWhiteDot.png), url(middleLightGrey.gif), url(bottomDarkGrey.gif);
background-repeat: no-repeat, repeat-x, repeat-y;
background-position: left top, left top, left top;
background-size: auto, auto, auto;
Demonstration of layered backgrounds

The first item in the list of parameters applies to the top-most background layer. The second item applies to the background underneath the first and this continues until the last parameter which applies to the bottom-most background. Be mindful of the ordering of these, as this is an easy place to trip up and cause yourself headaches. ^^

One of the CSS rules above that may seem new to you is the background-size rule. This can be used in a number of clever ways to achieve all kinds of things. I won’t cover it in detail, so if you need more information about it then have a look here (via CSS3.info).

Getting it done

So now you’ve had a look at how easy the CSS is for multiple backgrounds, we’ll get started with turning the majority of the design into multiple backgrounds on a body element.

For simplicity I have provided all of the ’tile-able’ images as data urls. These can be put into the background-image rule the same way you would use url(file.png). You’ll need these later on, so don’t forget about them!

/* Red Banner */
url(data:image/gif;base64,R0lGODlhAQBQAIAAANxROMhGMSwAAAAAAQBQAAACCoSPqcvtD4KcdBYAOw==)
/* Grey Area */
url(data:image/gif;base64,R0lGODlhAQABAIAAAO/v7wAAACwAAAAAAQABAAACAkQBADs=)
/* Footer */
url(data:image/gif;base64,R0lGODlhAQB4AIAAACMjIxwcHCwAAAAAAQB4AAACDIyPCMvtD6OctNoLCgA7)

We’ll style these three backgrounds first, and then add the large central image. The contents of the three images are relatively straight forward, and that’s why I’ve been able to fit them into pretty neat and tidy data urls. Data urls are a useful way to reduce the number of image requests on your page, but use them carefully and not for large images; data urls take up more space than the image they represent. In this case the encoded images are:

– Red Banner – A 1px by 29px gif, comprised of two tones of red.
– Footer – A 1px by 32px gif, comprised of two tones of dark grey.
– Grey Area – A 1px by 1px light grey gif.

When starting out with multiple backgrounds it’s a good idea to write the CSS for each background separately and join them together later on. This is especially helpful when you are writing a tutorial and need to split it into different sections of explanation :P

Red Banner

The red banner is nice and easy. A simple repeat-y and a background position of left top.

body
{
	background-image: 
    url(data:image/gif;base64,R0lGODlhAQBQAIAAANxROMhGMSwAAAAAAQBQAAACCoSPqcvtD4KcdBYAOw==);
	background-repeat: repeat-x;
	background-position: top;
}
See it in action!

Grey Area

As the image for the grey area is only a 1px by 1px image you may be wondering how it is going to be used. Well, as I mentioned a bit further up, the background-size rule is a CSS 3 rule that can help us get exactly what we want out of this single pixel image. It is possible to do this by using a linear-gradient of solid colour as the background image, but by the time you’ve added all of the browser specific extensions to your CSS you actually use more than double the bytes.

The grey area will need to cover the entire width of the page, but only a certain amount of the height. To do this we will specify a background-size of 100% in width and 515px in height. This will stretch our image to the desired dimensions, it will not tile the image (currently there is no nice way to tile an image within a specified area, but you can fake the effect with multiple backgrounds)

body
{
	background-image: 
    url(data:image/gif;base64,R0lGODlhAQABAIAAAO/v7wAAACwAAAAAAQABAAACAkQBADs=);
	background-repeat: no-repeat; /* because we are stretching! */
	background-size: 100% 515px;
}
See it in action!

Sticky Footer

A sticky footer made of a background-image you say? Surely that’s as easy as setting background-position: bottom; on a background that’s attached to the body!

Unfortunately, it’s not. This will actually achieve an undesirable effect where the background will be sat at the bottom of the body element, regardless of whether or not it’s the bottom of the window (so if you have a short amount of content, the footer will be halfway up the page somewhere). The fix for this seems to highlight something strange; background images you apply to the body element, actually get applied to the html element. You can see this happening if you apply a border to the top of the body on any of the backgrounds you’ve been working on so far. The background will not get pushed down no matter how thick you make that border.

So the simple fix for this problem actually lies in setting a minimum height on the html element. Using the CSS that we had expected would work now gives us the result we wanted.

html
{
	min-height: 100%;
}

body
{
	background-image: 
    url(data:image/gif;base64,R0lGODlhAQB4AIAAACMjIxwcHCwAAAAAAQB4AAACDIyPCMvtD6OctNoLCgA7);
	background-position: bottom;
	background-repeat: repeat-x;
}
See it in action!

The background will now stick to the bottom of the page, move with window resizes and stop moving when it hits the bottom of the content! (you can demo this yourself by giving your body a fixed height of 400px and resizing the window)

Central Image

Last but not least, we need to position the cartoon in the middle. The image file that we are going to use is here

body
{
	background-image: url(http://db.tt/2hPF3iDy)
	background-position: center top;
	background-repeat: no-repeat;
}
See it in action!

A body with multiple backgrounds

Now that we’ve tested our backgrounds are working as expected, it’s time to bring them all together! We need to make sure that we layer our backgrounds correctly so they don’t overlap incorrectly and cover our hard work, lets start out with a plan.

body
{
	background-image:    [red banner], [footer], [cartoon], [grey area];
	background-position: [red banner], [footer], [cartoon], [grey area];
	background-repeat:    [red banner], [footer], [cartoon], [grey area];
	background-size:        [red banner], [footer], [cartoon], [grey area];
}

As I said before, the first parameter will be the top-most background with subsequent parameters being placed underneath. Now all that remains is for us to drop the CSS values that we have gathered in each of the sections into the correct spot in our plan. A number of the backgrounds don’t have values for each of the CSS properties, in these cases we should use the default values to avoid breaking anything (pro-tip here are the defaults you need: background-position: left top; background-size: auto;)

That’s it! Your final CSS should look like this!

html
{
	min-height: 100%;
}

body
{
	background-image: 
    url(data:image/gif;base64,R0lGODlhAQBQAIAAANxROMhGMSwAAAAAAQBQAAACCoSPqcvtD4KcdBYAOw==),
    url(data:image/gif;base64,R0lGODlhAQB4AIAAACMjIxwcHCwAAAAAAQB4AAACDIyPCMvtD6OctNoLCgA7),
    url(http://db.tt/2hPF3iDy),
    url(data:image/gif;base64,R0lGODlhAQABAIAAAO/v7wAAACwAAAAAAQABAAACAkQBADs=);

	background-position: top, bottom, top, left top;
	background-repeat: repeat-x, repeat-x, no-repeat, no-repeat;
	background-size: auto, auto, auto, 100% 515px;
}
See it in action!

Fin. ^^

You’ve experimented with multiple backgrounds and survived! But multiple backgrounds are just the beginning of turning this design into code! If folks are interested in what happens next then follow me on Twitter and let me know! If I get enough interest I’ll write up a tutorial on the next part of the process from design to code ^^

Comments

(showing one comment)

  1. Richard Halford11/01/2013 @ 12:51pm

    Hi John,

    Sign me up! Very interested to see the transition to code.

Leave a Comment