Borders and backgrounds with CSS3 - HTML5 and CSS3 - page 362

One of the advantages of images in markup is that it's easy to make an inline
image scale according to the size of its container: set the width of the
image to be 100%. But in CSS2 backgrounds, there's no way to make the image be
anything other than its innate size. The following example shows this 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;
}
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, the
background image might look a little
incongruous. If you translate “Columbia
Internet” into French, for example, sud-
denly you have an image with some text
sticking out underneath. The visual
relationship is lost.
The new background-size property
allows the image to be stretched in
proportion to the dimensions of the
element:
h1 {
background-image:
url('head-banner.png');
background-repeat: no-repeat;
background-size: 100% 1.85em;
padding-top: 1.85em;