Background-size – CSS3

Background-size – CSS3 .

Another new property introduced by the CSS3 Backgrounds and Borders module isbackground-size. The property adds new functionality to CSS allowing designers to specify the size of background images using either lengths, percentages, or by using one of two keywords; contain or cover.

Browser support has grown of late, with the current versions of most popular browsers now supportingbackground-size, including Firefox, Safari, Chrome, Internet Explorer and Opera, without the need for vendor prefixes.

Here’s a very basic example. In the first box below background-size has been set to auto (the default value) meaning that the background image is shown at its original size. In the second box background-size has been set to 275px (w) x 125px (h). In both cases, the background image has been defined so as not to be repeated.

background-size: auto;
background-size: 275px 125px;

#example1 {
background-size: auto;

#example2 {
background-size: 275px 125px;

background-size: <bg-size> [ , <bg-size> ]*

<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

background-size: 200px;
background-size: 200px 100px;
background-size: 200px 100px, 400px 200px;
background-size: auto 200px;
background-size: 50% 25%;
background-size: contain;
background-size: cover;

#example {
width: 550px;
height: 250px;
background-image: url(background.png);
background-repeat: no-repeat;
background-color: #EEE;
background-size: as defined in individual examples;

This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s