This post originated from an RSS feed registered with Web Buzz by Lee v. Original Post: Backgrounds in CSS3 Feed Title: IT Jungles Feed URL: http://www.itjungles.com/rss Feed Description: Learn all tech stuff at ITJungles.com Latest Web Buzz Posts Latest Web Buzz Posts by Lee v Latest Posts From IT Jungles

CSS3 contains some of the new properties, which allow greater control of the platform elements.
In this lesson you will learn about the nature of the following platforms:

• background-size

• background-origin

• background-multiple

You'll also learn how to use multiple background images.

Which browsers support?

-          Firefox 3.6 and earlier  requires the prefix -moz- to support the background-size property.

-          Safari 4 requires the prefix -webkit- to support the new background properties.

-          Internet Explorer 9, Firefox 4, Chrome, Safari 5 and Opera support the new background properties.

• The background-size Property

Before CSS3, background image size is determined by the actual size of the image. In CSS3 can determine the size of background images, allows us to re-use the image in different contexts.

You can specify the size in pixels or percentage. If you specify a percentage size, size is relative to the width and height of the parent element.

Example:

.itjungles{
background: url('/image1.gif');
-moz-background-size:60px 80px; /* Firefox 3.6 */
background-size:60px 80px;
background-repeat:no-repeat;
}

• The background-origin Property

The background image can be placed within the content-box, padding-box, or border-box area.

Example:

.itjungles{
background: url('/image1.gif');
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}

• The Multiple Background Images

CSS3 allows you to use multiple background images for an element.

Example:

.itjungles{ background-image: url('/image1.gif'),url(image2.gif);}