Multiple Background Images

Style the BODY tag!

One of the most common web design archetypes is a fixed-width page that remains centered horizontally in the browser even when as window is resized.

A specific “sweet spot” measurement for optimal page width has gradually increased as hardware screen size has improved, but this simple CSS technique for auto-magically centering any block element has stood the test of time. After my “reset” code it’s the first line in many of my stylesheets.

demo-page

body { width: 980px; margin: auto; }

Yep! It’s that simple. Especially if you remember that you can style the BODY tag. Play with a working demo here and pay attention to how the top ribbon reacts as you expand and contract the width of your browser window.

Add multiple backgrounds

Many web designers create extra container DIVs ( #wrapper, #content, etc.) to help organize and compose their layouts by providing additional “layers” for attaching background images. With CSS3’s multiple backgrounds the simple BODY tag can be used to create visually complex foundations for sophisticated page designs with very little code.

Multiple background images eliminate the need for wrapper DIVs and allow for more creative use of repeating pattern elements to keep file sizes small and load times fast. This is especially important with today’s mobile web and retina displays.

image-optiimzation

The key to this efficiency lies in the fact that each background declaration can have a list of multiple values freeing you to create layers of patterns, stripes, and single images are all positioned independently from one another.

The easiest way to write this code is using the shorthand form of the background property values. Here is the complete style rule for the BODY selector of the demo webpage above.

body{
width:600px;
margin: auto;
background:
url(ribbon.png) no-repeat center top,
url(stone.png) repeat-x,
url(pattern.gif);
}

Note there is just a single background declaration with multiple values separated by commas. The final value in the list has to end with the semi-colon to properly close the declaration.

Code Order Matters

One confusing GOTCHYA when using multiple backgrounds is that the “source order” of the values is the opposite of what you expect. The first background will appear on top and each successive layer stacks up behind. This can be frustrating since it’s the reverse of what we’re used to with HTML/CSS. When all you see is a full page repeating element check to be sure it’s not covering up your other intended images layers. Learn MoreĀ»

Even More to Explore

With some creative thinking about how you can use all the background parameters you can produce a truly elaborate base design to support your content.

Want a footer strip anchored to the bottom of the page?

background:url(footer-pattern.png) repeat-x fixed right bottom;

A logo overlay that “sticks” to the top right corner?

background:url(logo.png) no-repeat fixed right top;

Or a pair of page curl icons permanently stuck in the bottom corners?

background: url(curl-prev.png) no-repeat fixed bottom left,
background: url(curl-next.png) no-repeat fixed bottom right,

You can even toss gradients into the mix!

background: url(logo.png) no-repeat fixed right top;
-webkit-gradient(linear, 135deg, #FFF, #000;

Even though this post is about working smarter and not harder to get the most out of the BODY tag. This CSS3 tip works on every block element on your page.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>