CSS3 adds several new background properties to the CSS standard. These properties allow for much greater control of the target element’s background. In next few tutorials, we will cover the following background properties:
background-sizebackground-originbackground-clip
In this overview, we wil cover the background-size property as well as how to apply multiple background images for a single element.
The background-size Property
The background-size property specifies the size of the background image. In CSS3 it is possible to specify the size of the background image. The image itself no longer is required to fill 100% of the element. The current versions of most popular browsers now support background-size without the need for vendor prefixes. This includes Firefox, Safari, Chrome, Internet Explorer and Opera.
background-size Syntax
The background-size property can be used to specify the size of background images in one of several ways. You can choose to either supply one or two lengths, percentages, or auto, contain keyword, or cover keyword.
background-size: [length]|[percentage]|auto|cover|contain;| Value | Description |
|---|---|
Length | Sets the height and width of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to “auto” |
Percentage | Sets the height and width of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to “auto” |
Auto | The default value, sets the background image at its original size |
Cover | Scale the background image to be as large as possible so that the background area is completely covered. Some parts of the background image may not be in view |
Contain | Scale the image to the largest size so that both its width and its height can fit inside the content area |
Vendor Prefix
For Firefox browsers older than version 4, the following vendor prefix is supported. Internet Explorer version 8 and earlier does not support this CSS3 property, nor provides a vendor prefix.
-moz-background-sizeExamples
In the following examples, we will take a look at how to use the various values when setting the background-size property. We will be using the following image for our examples.
We will use the following HTML code for all of the examples below. The only difference among the examples below is the value assigned to the background-size property.
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
width: 100%;
height: 400px;
background-image: url(background.png);
background-repeat: no-repeat;
background-color: #ffffff;
background-size: /* Defined by Specific Examples Below */;
}
</style>
</head>
<body>
<div id="myDiv"></div>
</body>
</html>background-size: auto
In this example, the background-size property is set to auto. A value of auto sets the background image to its original size. In this example, the div has a width of 100% and a height of 400px. However, the image only has a width of 640px and a height of 360px.
background-size: contain
If the contain value is assigned to the background-size property, the background image is scaled, while preserving the image’s aspect ratio, so as to be as large as possible providing that it is contained within the background positioning area. The image’s width or height does not exceed the background positioning area. Therefore, there may be some areas of the background which are not covered by the background image.
background-size: cover
If the cover value is assigned to the background-size property, the background image is scaled, again preserving the image’s aspect ratio, but in this case, the image is as large as possible so that the background positioning area is completely covered by the background image.
Unlike the contain value, the cover value will result in the images width or height are equal to or exceed the background positioning area. Therefore, some parts of the background image may not be in view within the background positioning area.
background-size: lengths
If the background-size is specified with fixed pixel values for width and height, the background image will be shown as specified. In this case, the image’s original aspect ratio will be lost. In the following example, the background-size is set to 250px for the width and 250px for the height.
background-size: percentages
If the background-size is specified with fixed percentage values for width and height, the background image will be shown as specified. In this case, the image’s original aspect ratio will be lost. In the following example, the background-size is set to 60% for the width and 40% for the height.
Multiple Background Images
CSS3 allows you to use several background images for an element. The background-size property, such as other background properties, allow for multiple values for background size, by specifying using a comma-separated list.
<style>
width: 100%;
height: 400px;
background-image: url(background1.png),url(background2.png);
background-repeat: no-repeat;
background-color: #ffffff;
background-position: 20px 100px, center bottom;
background-size: auto, auto;
</style>
