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

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…

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%;
}

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;
}

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%.

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:

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;

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;

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.

The Quick Python Book, Second Edition
Vernon L. Ceder

Liferay in Action
Richard Sezov, Jr.

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