Browser

Working with CSS3 background images

Ryan Boudreaux goes over some examples of writing CSS3 code for background images that you can begin to implement now.

This segment of the CSS3 series will focus on images, specifically CSS3 background images which can be implemented in many browsers today. Check out the previous posts in the CSS3 series:

CSS3 background images

Background images and textures can be utilized to layer a background without the use of separate divs, often adding a nice graphic touch to websites. In CSS3 we can now apply dimensions as well for images and define multiple background images within a single rule. There are two methods which allow for establishing rules. They are the CSS3 individual background rule and the CSS3 shorthand background rule; I will review both of them in this segment.

Browser support for CSS3 multiple backgrounds includes Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+), and Internet Explorer (9.0+).

The CSS3 background individual method is essentially a comma separated list of layered images written in the syntax form:

background: url(%path%/image1.xxx), url(%path%/image2.xxx);

And with the background individual method, we can include a comma separated list of background properties including background-repeat, background-attachment, background-position, background-clip, background-origin, and background-size.

In the example below, the background is defined by class with width of 800, height of 500, and a background containing three images layered, with background-position and background-repeat defined as shown in this CSS3 code:

.mBg_1 {
      width: 800px;
      height: 500px;
      background:
      url(images/barn.png),
      url(images/clouds.png),
      url(images/grass.png);
      background-position: bottom, left top, bottom;
      background-repeat: no-repeat;
}

The above code results in this example of the barn, cloud, and grass images displayed in Chrome:

Figure A

The other way of presenting background images utilizes what is known as the background shorthand method. The W3C CSS3 Backgrounds and Borders specification provides this explanation of the background shorthand syntax:

The number of comma-separated items defines the number of background layers. Given a valid declaration, for each layer the shorthand first sets the corresponding layer of each of ‘background-position', ‘background-size', ‘background-repeat', ‘background-origin', ‘background-clip' and ‘background-attachment' to that property's initial value, then assigns any explicit values specified for this layer in the declaration. Finally ‘background-color' is set to the specified color, if any, else set to its initial value.

If one <box> value is present then it sets both ‘background-origin' and ‘background-clip' to that value. If two values are present, then the first sets ‘background-origin' and the second ‘background-clip'.

Of note here, the background-color must be the last layer in the declaration using the shorthand method.

One way to represent the background shorthand method specifying images with each one given a precise position is represented in the following syntax:

background:  url(%path%) Xpx Ypx, where Xpx = x-axis and Ypx = y-axis;

For example, the CSS background rule below defines the html of the document with a number of small images including a grid and several color swatch chips layered above.

html {
      background:
      url(images/ffccff_swatch.png) 175px 25px no-repeat,
      url(images/ff9933_swatch.png) 125px 425px no-repeat,
      url(images/cccc33_swatch.png) 325px 325px  no-repeat,
      url(images/669966_swatch.png) 325px 125px no-repeat,
      url(images/cccccc_swatch.png) 175px 275px no-repeat,
      url(images/ffffcc_swatch.png) 425px 125px no-repeat,
      url(images/ccffcc_swatch.png) 575px -25px no-repeat,
      url(images/ffccff_swatch.png) 225px 425px no-repeat,
      url(images/ff9933_swatch.png) -25px 225px no-repeat,
      url(images/ffccff_swatch.png) 525px 325px no-repeat,
      url(images/ff9933_swatch.png) 375px 225px no-repeat,
      url(images/cccc33_swatch.png) 125px 225px  no-repeat,
      url(images/grid.png) repeat;
}

This example, using the shorthand background method, results in a graphic background, incorporating some of the content from previous CSS3 segments within the HTML, including the blockquote and multi-column layout, and is rendered as seen below in Chrome:

Figure B

Positioning of images using the CSS3 shorthand background properties method can also take on the form of utilizing a position for each image as in this form:

.mBg_2 {
      width: 800px;
      height: 500px;
      background:
      url(images/barn.png) bottom right no-repeat,
      url(images/clouds.png) top left no-repeat,
      url(images/grass.png) bottom no-repeat;
}

The above code results in the following as displayed in Chrome:

Figure C

As you can see from the examples given above, there are two ways to present the layered images utilizing CSS3. The next segments on CSS3 will review border images, rounded corners, 3D text, transitioning and other features and functions, which can be implemented today.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

0 comments

Editor's Picks