CSS3 contains three new background properties: background-size, background-origin, and background-clip, also you can add multiple background images to an element and create gradients with linear-gradient.

background-size

The background-size property lets you to determine the size of the background image. So, if you want, you can use the same image in different contexts, with different size.

- Values (you can specify the size in pixels (px) or in percentages (%)):
The background-size property is supported in IE9+, Firefox 4+, Opera, Chrome, and Safari 5+.

- Example:
<style type="text/css"><!--
#id1 {
 width:200px;
 height:100px;
 border:1px solid blue;
 background:url('css3.jpg');
 background-size:100px 60px;
 background-repeat:no-repeat;
}
#id2 {
 width:300px;
 height:120px;
 border:1px solid #01da02;
 background:url('css3.jpg');
 background-size:contain;
 background-repeat:no-repeat;
}
#id3 {
 width:300px;
 height:120px;
 border:1px solid silver;
 background:url('css3.jpg');
 background-size:cover;
}
--></style>

<div id="id1">Free CSS Course - size in pixels</div>
<div id="id2">coursesweb.net - size contain</div>
<div id="id3">www.marplo.net - size cover</div>
Result:
css3 tutorial
Free CSS Course - size in pixels
css course
coursesweb.net - size contain
www.marplo.net - size cover

Color Gradients

The background property is getting another enhancement with a feature that allow to create color gradients for the background.
The syntax of the property for background gradient varies from a browser to another, so you need to specify the gradient property for each major browser, as you can see in the following example.
<style type="text/css"><!--
#id1 {
 width:300px;
 height:120px;
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dafeda', endColorstr='#0308fe');   /* for IE 7, 8 */
 background-image: -ms-linear-gradient(top left, #01fe02, #0102fe);     /* IE10 */
 background: -moz-linear-gradient(top left, #1f1, #fff, #11f);          /* Mozilla Firefox */
 /* for Safari, Chrome */
 background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #0f1), color-stop(0.5, #fff), color-stop(1, #01f));

 background-image: -o-linear-gradient(top left, #01fe02, #0102fe);          /* Opera 11.1+ */
 background: linear-gradient(top left, #1f1, #fff, #11f);          /* W3C Markup */
}
--></style>
<div id="id1">Free CSS Course<br />
coursesweb.net</div>
Result:
Free CSS Course
coursesweb.net

The direction of the gradient can be controlled, as can the distance it takes to transition colors.
If you want the gradient direction to start from the top, use only top, instead of "top left"; the same for the left. Also, you can set the distance of the color in gradient, by adding a percent after the color value (or a value between 0 and 1 for Webkit browser).
- Example:
<style type="text/css"><!--
#id1 {
 width:300px;
 height:120px;
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dafeda', endColorstr='#0308fe');   /* for IE 7, 8 */
 background-image: -ms-linear-gradient(top, #01fe02 0%, #0102fe 99%);     /* IE10 */
 background: -moz-linear-gradient(top, #1f1 0%, #fff 65%, #11f 99%);          /* Mozilla Firefox */
 /* for Safari, Chrome */
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0f1), color-stop(0.6, #fff), color-stop(1, #01f));

 background-image: -o-linear-gradient(top, #01fe02 0%, #0102fe 99%);          /* Opera 11.1+ */
 background: linear-gradient(top, #1f1 0%, #fff 65%, #11f 99%);          /* W3C Markup */
}
--></style>

background-origin

The background-origin property specifies the positioning area of the background image. It takes three different values: The background-origin property is supported in IE9+, Firefox 4+, Opera, Chrome, and Safari 5+.

- Example:
<style type="text/css"><!--
#id1 {
 width:350px;
 height:120px;
 padding:20px;
 border:3px solid blue;
 background:url('css3.jpg');
 background-repeat:no-repeat;
 background-color:#bcfede;
 background-origin:content-box;
}
#id2 {
 width:350px;
 height:120px;
 padding:20px;
 border:3px solid blue;
 background:url('css3.jpg');
 background-repeat:no-repeat;
 background-color:#bcfede;
 background-origin:border-box;
}
--></style>

<div id="id1">Position the background image within the content-box</div>
<div id="id2">Position the background image relative to the border</div>
Result:
Position the background image within the content-box
Position the background image relative to the border

background-clip

The background-clip specifies the painting area of the background, it is used to determine whether the backgrounds extends into the border or not.
This property takes three different values: The background-clip property is supported IE9+, Firefox 4+, Opera, and Chrome.

Example:
<style type="text/css"><!--
#id1 {
 width:350px;
 height:120px;
 padding:20px;
 border:2px solid blue;
 background-color:#cdfeda;
 background-clip:padding-box;
 -webkit-background-clip:padding-box;      /* Safari */
}
#id2 {
 width:350px;
 height:120px;
 padding:20px;
 border:2px solid blue;
 background-color:#cdfeda;
 background-clip:content-box;
 -webkit-background-clip:content-box;      /* Safari */
}
--></style>

<div id="id1">background-clip with padding-box</div>
<div id="id2">background-clip with content-box</div>
Result:
background-clip with padding-box
background-clip with content-box

CSS3 Multiple Background Images

CSS3 alows to apply multiple background images to a single element.
Supported by Firefox 3.6+, IE 9, Safari, and WebKit.
Multiple background images are assigned with comma-separated values for the background-image property (with the earliest image appearing closest to the user).
The other background image–related properties take matching comma-separated values or a single value applying to all images.

- Example:
<style type="text/css"><!--
#id1 {
 width:400px;
 height:150px;
 background-image: url('html_course.jpg'), url('css3.jpg');
 background-repeat: no-repeat, repeat-x;
 background-position: center top, center bottom;
}
--></style>

<div id="id1">Multiple background images</div>
Result:
Multiple background images

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag create a highlighted bolded text?
<q> <strong> <em>
<p>Address: <strong>http://CoursesWeb.net/</strong> - Tutorials.</p>
Which of these CSS codes displays the text bolded?
text-size: 18px; font-style: italic; font-weight: 800;
#id {
  font-weight: 800;
}
What JavaScript function can be used to call another function multiple times, to a specified time interval?
setInterval() setTimeout() push()
function someFunction() { alert("CoursesWeb.net"); }
setInterval("someFunction()", 2000);
Click on the correctly defined variable in PHP.
var vname = 8; $vname = 8; $vname == 8;
$vname = 8;
echo $vname;
CSS3 - new Background properties

Last accessed pages

  1. Number Lines (1667)
  2. Bubbles3 (8868)
  3. Zuma Games (8603)
  4. Logic Perspicacity Games (2788)
  5. Match Around The World (171)

Top accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (47785)
  2. Read Excel file data in PHP - PhpExcelReader (35922)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (35547)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (32047)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (29322)