CSS3 contains three new background properties: background-size, background-origin, 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 (%)):

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

<h4>Example background-size</h4>

<div id='id1'>Free CSS Course - size in pixels</div>
<div id='id2'>coursesweb.net - size contain</div>
<div id='id3'>marplo.net - size cover</div>

Color Gradients

The background property is getting another enhancement with a feature that allow to create color gradients for the background, using the linear-gradient() method, as you can see in the following example.

<style>
#id1 {
 width:300px;
 height:120px;
 background: linear-gradient(top left, #1f1, #fff, #11f);
 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));
}
</style>

<h4>Example background with gradient color</h4>

<div id='id1'>Free CSS Course<br>
coursesweb.net/css </div>
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>
#id1 {
 width:300px;
 height:120px;
 background: linear-gradient(top, #1f1 0%, #fff 65%, #11f 99%);
 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));
}
</style>

<h4>Example linear-gradient()</h4>

<div id='id1'>Free HTML Course<br>
coursesweb.net/html </div>

background-origin

The background-origin property specifies the positioning area of the background image. It takes three different values:


- Example:
<style>
#id1 {
 width:350px;
 height:120px;
 padding:20px;
 border:3px solid blue;
 background:url('css/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('css/css3.jpg');
 background-repeat:no-repeat;
 background-color:#bcfede;
 background-origin:border-box;
}
</style>

<h4>Example background-origin</h4>

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

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:
Example:
<style>
#id1 {
 width:350px;
 height:120px;
 padding:20px;
 border:2px solid blue;
 background-color:#cdfeda;
 background-clip:padding-box;
}
#id2 {
 width:350px;
 height:120px;
 padding:20px;
 border:2px solid blue;
 background-color:#cdfeda;
 background-clip:content-box;
}
</style>

<h4>Example background-clip</h4>

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

CSS3 Multiple Background Images

CSS3 alows to apply multiple background images to a single element.
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>
#id1 {
 width:400px;
 height:150px;
 background-image: url('css/html_course.jpg'), url('css/css3.jpg');
 background-repeat: no-repeat, repeat-x;
 background-position: center top, center bottom;
}
</style>

<h4>Example Two Background Images</h4>

<div id='id1'>There is hope, there is faith.<br>
There is forgiveness, there is love.</div>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag can be used to embed an external application (SWF, PDF) in web page?
<mark> <embed> <canvas>
<embed src="flash_game.swf" width="450" height="350" />
Which CSS pseudo-element adds a special style to the first line of a text?
:first-letter :before :first-line
#id:first-line {
  font-weight: bold;
  color: blue;
}
Click on the window object property which gets or sets the URL of current page.
window.location window.self window.status
var url = window.location;
alert(url);
Indicate the PHP function used to get the contents of a file or page and store it into a string.
fopen() file_put_contents() file_get_contents()
$homepage = file_get_contents("http://coursesweb.net/");
echo $homepage;
CSS3 - new Background properties

Last accessed pages

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (97379)
  2. JavaScript Chronometer / Stopwatch (5541)
  3. Contact page - CoursesWeb (27248)
  4. Tabs effect with CSS (27923)
  5. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (34518)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1320)
  2. Contact page - CoursesWeb (1291)
  3. Tabs effect with CSS (1288)
  4. PHP getElementById and getElementsByTagName (588)
  5. Get Attribute (ID, Class, Name, Title, Src) with jQuery (488)