Click here to Skip to main content
Click here to Skip to main content
Go to top

Quick & Easy HTML5 & CSS3 - New Features for Background Images

, 14 Jun 2011
Rate this:
Please Sign up or sign in to vote.
A Chapter excerpt from Quick & Easy HTML5 & CSS3
image002.jpg Quick & Easy HTML5 & CSS3

Rob Crowther

In this article from Quick & Easy HTML5 & CSS3, the author discusses four new features for the background image: sizing; multiple backgrounds on a single element; positioning relative to the border, padding, or content; and clipping according to the border, padding or content. Compliments of manning.com is a 40% discount to the Code Project community. Use promotional code code40project at manning.com and save 40% off the MEAP, eBook and pBook. All pBook purchases include free eformats (PDF, ePub, and Kindle) when available.

You may also be interested in…

CSS3 offers four new features for the background image: sizing; multiple backgrounds on a single element; positioning relative to the border, padding, or content; and clipping according to the border, padding, or content.  In this article, you will learn about each of these new features.

Browser Quick Check
Type Standard Prefixed
IE 9 -
Firefox 4.0 3.6
Chrome 7 5
Safari 5 3
Opera 10.5 10.1

Background Size

Background images are intended to be used purely for decoration, whereas images placed in the HTML are supposed to mean something. However, images placed in the markup have certain practical advantages that can discourage web authors from doing the right thing.

image003.gif One of these advantages of images in markup is that it's easy to make an inline image scale according to the size of its container; simply set the width of the image to be 100%. But, in CSS2, there is no way to make the image be anything other than its innate size. The following example shows the issue.

In this example, an image has been set as a decorative background to a header:

h1 {
    background-image: 
      url('head-banner.png');
    background-repeat: no-repeat;
    padding-top: 1.85em;
}

The top padding has been set to allow room for the background image, and the image itself is sized to match the width of the heading.

 

If the heading was to change at all though, the background image might look a little incongruous. If we translate “Columbia Internet” into French, suddenly we have an image with some text sticking out underneath, and the visual relationship is lost.

The new background-size property allows the image to be stretched in proportion to the element’s dimensions:

h1 {
    background-image: 
      url('head-banner.png');
    background-repeat: no-repeat;
    background-size: 100% 1.85em;
    padding-top: 1.85em;
    display: inline-block;
}

The h1 is set to be an inline-block so that its width will shrink-wrap its contents, and then the background image is set to be a fixed height and full width. You can see that the image becomes distorted as the width of the element forces it to stretch. This approach is only suitable to allow for small changes in the expected element width.

If the text should stay the same but appear in different font sizes, it is possible to avoid the aspect ratio issue. If you know how wide the text will be, simply specify the width and height in proportion to the aspect ratio:

h1 {
    background-image: 
      url('head-banner.png');
    background-repeat: no-repeat;
    padding-top: 2.18em;
    display: inline-block;
    background-size: 11.1em 2.18em;
}
section:nth-of-type(1) h1 {
    font-size: 200%;
}
section:nth-of-type(2) h1 {
    font-size: 250%;
}
section:nth-of-type(3) h1 {
    font-size: 300%;
}

The ability to size backgrounds aligns well with vector graphics. Because they are vectors, SVG graphics are smooth and sharp no matter how much you stretch them, whereas bitmap graphics become blocky and blurry.  Below are two examples—one using a bitmap PNG format, the other SVG.

div {
    background-image: url('aj.png');
    background-repeat: no-repeat;
    background-size: 50% 100%;
    padding-left: 50%;
    display: inline-block;
}
div {
    background-image: url('aj.svg');
    background-repeat: no-repeat;
    background-size: 50% 100%;
    padding-left: 50%;
    display: inline-block;
}

Although SVG works well with background sizing, it is a bad fit for photographic type images. You may want to set a single picture behind your content, similar to the effect achieved by setting a desktop background on your computer. In this case, the detail of the image is less important, so distortion is less of an issue.

This example shows the main content with a semi-transparent background overlaid on top of a background image set to fill the entire box. Here is the markup:

<section>
  <div>
    <p>In almost every...</p>
  </div>
</section>

The CSS for this is shown in the listing below.  Unlike the previous examples, this uses the shorthand syntax. The size appears with the position separated by a slash: top / 100%.

section {
    margin: 1em;
    padding: 5%;
    outline: 4px dashed black;
    background: url('10years.jpg') top / 100% no-repeat;
    display: inline-block;
    min-height: 342px;
    min-width: 300px;
}
div {
    background-color: rgba(255,255,255,0.66);
}

Note that, although several browsers have implemented background-size only, Opera has implemented the shorthand syntax. For other browsers, you will have to stick with a separate background-size declaration.

Scaling is not the only new background feature added in CSS3; you also are allowed to attach multiple backgrounds to a single element. In the last example above, we added an element to the markup whose only role was to add a background to the text. In the next section, you'll see how CSS3 allows you to do without additional markup for styling.

Multiple Backgrounds

In CSS2, you are only allowed one background image per element, but there are many situations where you might want more than one image:

  • A header might have a background image spanning the width of the page as well as a company logo.
  • A decorative pullquote box could have opening and closing quotes on either side.
  • Beveled buttons or tabs have images for the left and right sides.
  • Creating a rough-edged paper scroll effect needs a repeating image down both sides.

Web authors often use CSS tricks to size a child element to match its container so that their background images can overlap (this is known as the sliding doors technique), but often they will be forced to introduce an extra element just to support the styling or even add a purely decorative image inline in the markup.

All of these approaches end up adding a purely presentational markup to the page or depending on elements being combined in a particular way. While this is usually not a big issue in these isolated instances, they indicate a lack of power in the presentation language, CSS. This lack of power is addressed in CSS3, as you'll see in the examples below.
Browser Quick Check
  Standard Prefixed
IE 9 -
Firefox 3.6 -
Chrome 7 -
Safari 3 -
Opera 10.5 -

Let's revisit the last example from the previous section, except this time without the additional div element for wrapping the content:

<section>
  <div>
    <p>In almost every...</p>
  </div>
</section>

Despite losing the extra element, the page still looks the same. That’s because two backgrounds are applied to the section element:

image013.gif
section {
    margin: 1em;
    padding: 5%;
    outline: 4px dashed black;
    background: url('trans-66.png') 50% 50% no-repeat,
                url('10years.jpg') no-repeat;
    background-size: 90% 90%, 
                     100%;
    display: inline-block;
}

Adding multiple background images is simply a matter of listing them, along with any relevant attributes, separated by commas in the background property:

background: top right
  url('pitr-head.png') no-repeat,
 bottom right
  url('aj-head.png') no-repeat,
 top left
  url('mike-head.png') no-repeat,
 bottom left
  url('sid-head.png') no-repeat;
image014.gif

All of the other background properties also allow a comma-separated list, so you could also write the above as:

background-image:
 url('pitr-head.png'), url('pitr-head.png'),
 url('mike-head.png'), url('sid-head.png');
background-position:
 top right, bottom right,
 top left, bottom left;
background-repeat: 
 no-repeat, no-repeat,
 no-repeat, no-repeat;
 

The background image you list first will be the closest to the viewer. If you put them all in the same place, you can see the first image covers the rest:

background: center
  url('pitr-head.png') no-repeat,
 center
  url('aj-head.png') no-repeat,
 center
  url('mike-head.png') no-repeat,
 center
  url('sid-head.png') no-repeat;

You can use this to your advantage to create some interesting effects. Here, we use a semi-transparent PNG image in between each of the other background images to create a progressive fading:

background: top right
  url('pitr-head.png') no-repeat,
 url('half-white.png'),
 bottom right
  url('aj-head.png') no-repeat,
 url('half-white.png'),
 top left
  url('mike-head.png') no-repeat,
 url('half-white.png'),
 bottom left
  url('sid-head.png') no-repeat;

Background Origin and Clipping

CSS2 has no control over which part of an element the background applies to. Since CSS2 doesn't allow background sizing, most authors will have not come up against this limitation, but CSS3 introduces two new properties to give web authors fine-grained control: background-origin and background-clip.

The next section will require an understanding of the CSS box model to get the most out of it.

The default for background-origin is  padding-box. This means the background applies to the area containing the padding but not to the area containing the border:

section {
    margin: 1em;
    padding: 1em;
    border: 1em dashed black;
    background-origin: padding-box;
}

This sample image is scaled to fill its container and set not to repeat.

Setting the origin to border-box means that the background will now extend out under the border:

section {
    margin: 1em;
    padding: 1em;
    border: 1em dashed black;
    background-origin: border-box;
}

Finally, content-box limits the background just to the content area, inside the padding:

section {
    margin: 1em;
    padding: 1em;
    border: 1em dashed black;
    background-origin: content-box;
}

The default value for background-clip is border-box:

section {
    margin: 1em;
    padding: 1em;
    border: 1em dashed black;
    background-clip: border-box;
}

Remember that our example is scaled and set not to repeat.

When applied to backgrounds that don't repeat, this is indistinguishable from padding-box because of the default value of background-origin:

section {
    margin: 1em;
    padding: 1em;
    border: 1em dashed black;
    background-clip: padding-box;
}

However, if the background is allowed to repeat, the difference becomes apparent. The setting of padding-box will still clip the image inside the border, but for border-box we can see the repeating image under the border:

section {
    background-clip: border-box;
    background-repeat: repeat;
}

Finally, content-box will clip the background to the content area:

section {
    margin: 1em;
    padding: 1em;
    border: 1em dashed black;
    background-clip: content-box;
}

Note that, even though the background is clipped, the image is still sized to the padding-box.

Scaling backgrounds uniformly may not always produce the effect you want. Although the sliding doors technique provides a workaround for that, there is a more straightforward CSS3 approach to achieve the same effect: border-image.

Summary

The features CSS3 for borders and backgrounds allow you to:

  • Add visual depth with drop shadows on text and boxes.
  • Create striking effects with border images.
  • Make things smooth with rounded corners.
  • Make your life easier with multiple backgrounds.
  • Snazz up your designs with gradients.

Most of these features give web authors a way to accomplish effects that are commonly used but, with CSS2, have to be created in graphics packages as images or require JavaScript hacks and additional HTML markup. We showed you some new possibilities for managing backgrounds with CSS3, including sizing, multiple backgrounds, positioning, and clipping.

Here are some other Manning titles you might be interested in:

image024.jpg

The Quick Python Book, Second Edition
Vernon L. Ceder

 

image025.jpg

Liferay in Action
Richard Sezov, Jr.

image026.jpg

Sass and Compass in Action
Wynn Netherland, Nathan Weizenbaum, and Chris Eppstein

 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Manning

United States United States
No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web03 | 2.8.140916.1 | Last Updated 14 Jun 2011
Article Copyright 2011 by Manning
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid