Did you find this useful?
Socialize it today.


CSS3 Background-Size Property

Tuesday, November 20, 2012

browser

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-size, background-origin, background-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.

Your browser may support the background-size property.

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;

ValueDescription
LengthSets 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"
PercentageSets 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"
AutoThe default value, which sets the background image at its original size.
CoverScale 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
ContainScale 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-size


Examples

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.


background-size example

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 apect 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 apect 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>



Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

Responsive Web Design with HTML5 and CSS3 HTML CSS and JavaScript Sergeys HTML5 CSS3