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
What attribute makes the input text box to not be modified by the user?
checked="checked" readonly="readonly" disabled="disabled"
<input type="text" value="fixed-value" readonly="readonly" name="a_name" />
What CSS property allows you to create rounded corners in your webpage design?
background-size border-size border-radius
.class {
  border:2px solid blue;
  border-radius:1.2em;
}
What instruction displays a confirmation dialog box to the viewer, who must then click OK or Cancel to proceed?
indexOf() confirm() prompt()
var ques = window.confirm("The result of 0+0 is 0?");
if (ques) alert("Corect");
else alert("Incorrect");
Indicate the PHP function that returns the lowest number of the parameter values.
floor() ceil() min()
$min_nr = min(12, 8, 25, 13);
echo $min_nr;        // 8
CSS3 - new Background properties

Last accessed pages

  1. SHA256 Encrypt hash in JavaScript (12617)
  2. AJAX Course, free Lessons (10656)
  3. Laravel Basic Architecture (299)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (104602)
  5. Cookies (416)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (361)
  2. Tabs effect with CSS (351)
  3. Contact page - CoursesWeb (350)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (133)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (81)