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.