CSS3 Lessons: Multiple Background Images

by Mike Badgley on July 16, 2010

The CSS3 background property has been completed enhanced from it’s CSS 2.1 predecessor, with some really interesting new features that I plan on investigating in future articles. For the purposes of this article, I’ll be looking at the multiple image ability of the background-image property.

The following lesson is based on the W3C Working Draft (June 12, 2010) of CSS Backgrounds and Borders Module Level 3.

The CSS2 Problem: Single Background Images

Rounded corner feature boxAs shown on the right, this is just a simple static content feature for the client’s Facebook and Twitter accounts. The layout and decoration of the feature, however, is a bit more complicated. Add to the fact that this element should have a fluid width and height, and you are looking at a very ‘heavy’ piece in terms of the HTML, CSS and imagery that are required to achieve this.

Using this example, it is clear that there will be five background images needed, as well as five HTML elements on which we can layer the images onto:

  • Rounded corner, top left
  • Rounded corner, top right
  • Rounded corner bottom left
  • Rounded corner with shadow and gradient, bottom right
  • Small icon of globe and speech bubbles

We can be creative and combine these images into a single sprite, but alas the same cannot be said for the HTML – we require the same number of elements as we have background images:

[source language="html"]
<div class="feature">
<div class="tr">
<div class="br">
<div class="bl">

<h2>Join the Conversation</h2>

<p>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nunc mollis nunc suscipit arcu
viverra vitae posuere eros dictum.
</p>

<p>
<a href="#" target="_blank"><img alt="Facebook" height="17" width="79" src="/labs/CSS3/lessons/_images/logo_Facebook_79w_17h.png" /></a>
<a href="#" target="_blank"><img alt="Twitter" height="22" width="93" src="/labs/CSS3/lessons/_images/logo_Twitter_93w_22h.png" /></a>
</p>

</div>
</div>
</div>
</div>
[/source]

The alternative is to force the element to be a static width and thus cut down on the amount of HTML required. This method allows you to define just a single background image (plus an extra one for the green icon) which is tall enough to allow the element to grow vertically without any display issues occurring.

In the case of the project I was working this element into, I went with the static width approach as I wanted to keep the markup as clean as possible. The problem with this approach, however, is when the feature needs to be shown within multiple columns of differing widths. I avoided HTML’s ‘tag soup’ only to jump into a nice bowl of CSS ‘soup’!

Of course, neither solution mentioned above is desirable, but our hands are tied with the constraints of the CSS 2.1 specification, so either we dumb down the design or  go HTML/CSS ‘crazy’.

The CSS3 Solution: Multiple Background Images

Note: Before I get into the CSS3 solution to this problem, I want to clarify that I understand using the border-radius property could achieve close to the effect shown above, but for the purposes of this tutorial I am looking for a purely background image based solution.

Creating the required background images

Generating the required (5) images was the first step, and so much like what has been done in the ‘old day’s, a image was sliced for each rounded corner (4) and then one for the green ‘globe’ icon. Since their is a subtle gradient (running bottom to top) in the design, the way I sliced this up was like so (the guides are there to show the dimensions of each image):

Screenshot of the background image boundaries for the feature

Note: The ‘globe’ icon was sliced out separately as an PNG-24.

The resulting images that were created, based on the diagram above, are as follows:

  • Top left (30×30)
    Top left corner of the rounded feature
  • Top right (251×30)
    Top right corner of the rounded feature
  • Bottom left (30×142)
    Top left corner of the rounded feature
  • Bottom right (251×142)
    Bottom right corner of the rounded feature

The HTML markup

With the enhancements to the background properly that CSS3 provides, the markup required to create a rounded-corner feature like this is greatly reduced from what was previously required in the HTML source example provided above. Since CSS3 allows for multiple background images, it means that we are no longer need to define an HTML element for each background image that the design requires. In other words, all the background images we need can be defined on a single element.

[source language="html"]
<div class="feature">

<h2>Join the Conversation</h2>

<p>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nunc mollis nunc suscipit arcu
viverra vitae posuere eros dictum.
</p>

<p>
<a href="#" target="_blank"><img alt="Facebook" height="17" width="79" src="/labs/CSS3/lessons/_images/logo_Facebook_79w_17h.png" /></a>
<a href="#" target="_blank"><img alt="Twitter" height="22" width="93" src="/labs/CSS3/lessons/_images/logo_Twitter_93w_22h.png" /></a>
</p>

</div>
[/source]

So much cleaner – and easier for an author to integrate into their content.

Styling the HTML markup with CSS3

The styling for the feature is very similar to the way this type of feature was done in the past. First, we need to define the general layout of the element before applying the background images (generated in the steps above) to it.

View the first step in the process here. Remember to view source to get the HTML and CSS

Next, using the multiple background image enhancement that CSS3 delivers, we simply map each of our images to the <div class=”feature”> element – positioning each in it’s proper location.

To do this, simply define each of the background images and separate them with a comma, like so:

[source language="css"]
div.feature {
background-image: url(_images/layout_feature_top_left_30w_30h.gif),
url(_images/layout_feature_top_right_251w_30h.gif),
url(_images/layout_feature_bottom_left_30w_142h.gif),
url(_images/layout_feature_bottom_right_251w_142h.gif),
url(_images/icon_globe_51w_49h.png);
}
[/source]

The order in which the background images are declared is important as the first is the top-most layer while the last one is at the bottom. In other words, you could think of the first background-image (layout_feature_top_left_30w_30h.gif) having a greater z-index than the last one (icon_globe_51w_49h.png)

View the second version of the feature here.

You’ll note that the only image visible is the first one – which is due to the fact that it is being repeated horizontally and vertically. Since none of the images should be repeated, we can simply issue a background-repeat property of no-repeat and this will apply to all the defined background images. There is no need to define a background-repeat: no-repeat 5 times, as is explained here in more detail (first two paragraphs).

The third version of the feature visible shows multiple images being applied to the feature box- that is if your browser supports this property!

The final step is to position each of these images to the appropriate location (x, y). Again, we can either define one position for all, or individually define each image’s position, which in this case is what we need to do, in a similar format to the background-image property we defined above:

[source language="css"]
div.feature {
background-position: 0 0, 100% 0, 0 100%, 100% 100%, 100% 0;
}
[/source]

How cool is that eh? One <div> element handling all five background images! This box can be as wide as we want, and can house as much content as we want – it is completely fluid.

Just one small problem – where did that green logo go? If you viewed the first five examples, there was no sign of it, but if you viewed the last example you could partially see it. Why is this? Remember the images are stacked from top (first image defined) to bottom (last image defined). In this example, the logo was defined last, so in order to make it visible we can just define it first and bump the other four images down one level, like so:

[source language="css"]
div.feature {
background-image: url(_images/icon_globe_51w_49h.png),
url(_images/layout_feature_top_left_30w_30h.gif),
url(_images/layout_feature_top_right_251w_30h.gif),
url(_images/layout_feature_bottom_left_30w_142h.gif),
url(_images/layout_feature_bottom_right_251w_142h.gif);

background-position: 95% 7%, 0 0, 100% 0, 0 100%, 100% 100%;
}
[/source]

Also, since the order of the images is shifted, that means the background-position property will need to be updated as well to reflect this change.

And there you have it, the completed rounded corner feature box that utilizes five background images within a single <div> element. View the final example here.

6 comments

[...] See this here. [...]

by Top Worthwhile Tutorials of the Week – #6 on August 2, 2010 at 3:46 am. #

[...] Images feature of CSS3. The tutorial was explained very good how to use this technique.See this here.Object Oriented JavaScript: Creating an Window BoxThis is a short tutorial about Object Oriented [...]

by Top Worthwhile Tutorials of the Week – #6 | AEXT.NET MAGAZINE on August 2, 2010 at 3:14 am. #

[...] CSS3 Lessons: Multiple Background Images [...]

by Weekly Design News – Resources, Tutorials and Freebies (N.47) | Programming Blog on July 27, 2010 at 4:41 am. #

[...] CSS3 Lessons: Multiple Background Images [...]

by Weekly Design News – Resources, Tutorials and Freebies (N.47) · rogdykker on July 27, 2010 at 3:52 am. #

[...] Plugin34 Awesome Products Geeks will LoveA Look At HTML5 and its Canvas TagjQuery DeconstructedCSS3 Lessons: Multiple Background ImagesWord-Wrap: A CSS3 Property That Works in Every BrowserAnatomy of JavaScript PuzzleLatest Tweets [...]

by Weekly Design News – Resources, Tutorials and Freebies (N.47) :Speckyboy Design Magazine on July 27, 2010 at 3:41 am. #