Using Backgrounds in CSS3

With CSS3, developers and designers can utilize an enhanced range of options for Web page backgrounds. New options include the ability to use multiple background images, to specify size properties for background images, and to define background origin and clipping in terms of the CSS box model.

In this tutorial we will work through various options using these new techniques, demonstrating the CSS syntax for each one.

Create a Page

Create a Web page with a single element and an area for your CSS declarations as follows:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<div id="bg-section">
This element has a background.
</div>
</body>
</html>

We will add style properties to apply the CSS3 background properties to the “div” element. Add some initial declarations in your style section:

/*general properties*/
div {
font-weight:bold;
margin:10px;
clear:both;
}

Set the Background Size

Using the new CSS3 background size property, you can define the size of a background image either in fixed pixels or in relative terms using a percentage value, in which case the background size is relative to the parent element. Add the following to your CSS section:

#bg-section {
/*dimensions*/
width:350px;
height:350px;
/*set the image and color*/
background:#666666 url(bgpic.jpg);
/*general*/
background-size:325px 325px;
/*older Firefox versions*/
-moz-background-size:325px 325px;
/*repeat property*/
background-repeat:no-repeat;
}

Take a moment to look at these declarations. The background image is set along with a color. You will need to alter the code to suit your own background image URL. In this case the image in question is displayed at 325px by 325px, with the parent element specified as being 25 pixels larger than that.

The background size property must be provided with one additional variation to accommodate some past versions of Firefox. In this case we specify the size using fixed pixels. Depending on the original size of the image, this code may either stretch or shrink it. View your page in the browser now, refreshing it each time we alter the code.

To use relative percentage values to set your background size, alter your code as follows:

/*general*/
background-size:100% 100%;
/*older Firefox versions*/
-moz-background-size:100% 100%;

This will make the image display at the same size as its parent element, which is 350px square in the code above. Again, depending on the image this may shrink or stretch it.

An interesting option when using percentage values is to set the background size so that the image is repeated a set number of times to fit perfectly within the parent element. For example, if you alter your CSS as follows, also removing the “background-repeat” declaration so that the image repeats, the image will appear 4 times, with 2 rows of 2, within the containing element:

/*general*/
background-size:50% 50%;
/*older Firefox versions*/
-moz-background-size:50% 50%;

This can be a convenient way to define how many times you want a background image to repeat and know that it will fill the space correctly.

CSS3 also provides the option to specify that you want the background image to either cover the parent element or to be contained within it. The following demonstrates stretching or shrinking the background image so that it completely fills the parent element, regardless of whether the element has different dimensions to the image:

/*general*/
background-size:cover;
/*older Firefox versions*/
-moz-background-size:cover;

To specify that the image should be scaled so that it fits within the parent element, without distorting it, you can use the contain value as follows:

/*general*/
background-size:contain;
/*older Firefox versions*/
-moz-background-size:contain;

As you can see, these properties allow you to build a level of flexibility into your designs, making it easier to create pages that are consistent in appearance.

Set the Background Origin

In CSS3 you can set your background image to display within the background of the content box, padding box or border box. To display the background image behind the content box, use the following:

/*general*/
background-origin:content-box;
/*version for Safari*/
-webkit-background-origin:content-box;

/*border*/
border:5px solid #006699;
/*padding*/
padding:10px;

For this property we need a variation on the syntax for Safari browsers. We add padding and border to the element so that you can see the difference between the origin properties as they appear in the page. View the page to see the background filling the content box, with padding and border around it. To use the padding box, alter the origin declarations as follows:

/*general*/
background-origin:padding-box;
/*version for Safari*/
-webkit-background-origin:padding-box;

To use the border box, alter the code as follows:

/*general*/
background-origin:border-box;
/*version for Safari*/
-webkit-background-origin:border-box;

Set the Background Clipping

As with the background origin property, you can instruct the browser to clip the image with reference to the box model. This is naturally most appropriate in cases where the background may exceed the bounds of the element as it appears in the page. To clip it at the content box, use the following syntax:

/*general*/
background-clip:content-box;
/*version for Safari*/
-webkit-background-clip:content-box;

To clip the image at the padding box, use the following:

/*general*/
background-clip:padding-box;
/*version for Safari*/
-webkit-background-clip:padding-box;

To clip at the border box, use the following:

/*general*/
background-origin:border-box;
/*version for Safari*/
-webkit-background-origin:border-box;

Use Multiple Background Images

CSS3 allows you to supply more than one image to display in your backgrounds. This includes images with transparent regions, or simply images with different dimensions. Use the following syntax to specify two background images:

/*more than one*/
background-image:url(pic1.png), url(pic2.png);

You can position the images so that they do not overlap, however if they do, the image specified first will appear on top in terms of the Z axis.

Conclusion

CSS3 introduces a much improved model for background images, addressing many of the frustrations and restrictions felt by designers in the past. As always, remember these are not properties you can rely on browser support for just yet.

See it in action: http://www.developerdrive.com/demo/using_backgrounds/demo.html

SHARE THIS POST
  • Anonymous

    Wish you had provided a demo for this- or even screen shots. Sometime we just dont have time to actually do a tutorial without having the images or a demo to actually show whether it might be useful or not- in fact very often images or a demo mean that we dont need to actually waste time testing out code in a tutorial untill we actually need to use it. It really would be a massive help.

  • fjpoblam

    Be careful: some Webkit nightlies and Chrome releases have degradation causing misbehavior for background-size:100% 100%; … Documented in Bugzilla.

  • http://web2feeds.com Web2 feeds

    Nice read, but I agree with Stefan. Some images would be great! Thanks!

  • http://www.bybe.net/ Web Design Bournemouth

    Really useful, Consider this page BOOK MARKED! Thanks!

  • http://www.webmentor.cr/ Marco Berrocl

    Images and demo. Sorry dude, call us spoiled and despite knowing what you are saying in some cases, we need to see it in action. Also, is this compatible with which versions of IE?

  • didem kutlu

    Finally ,using two background image

  • ThatsGravy Designs

    Thanks for this! I appreciate it!