Css Course


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 tag adds an image in web page?
<div> <img> <span>
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Which of these CSS codes displays the text oblique?
font-style: italic; text-decoration: underline; font-weight: 500;
#id {
  font-style: italic;
}
Click on the jQuery function used to hide with animation a HTML element.
click() hide() show()
$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
});
Click on the correctly defined function in PHP.
fname function() {} function fname() {} function $fname() {};
function fname($a, $b) {
  echo $a * $b;
}
CSS3 - new Background properties

Last accessed pages

  1. Register and show online users and visitors (35911)
  2. $_GET, $_POST and $_REQUEST Variables (30985)
  3. Ajax script to Save Canvas Image on Server (5131)
  4. innerHTML and outerHTML to Get and Replace HTML content (26522)
  5. Inheritance - Parent class and Child class (3647)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (552)
  2. PHP Unzipper - Extract Zip, Rar Archives (535)
  3. SHA256 Encrypt hash in JavaScript (429)
  4. querySelector and querySelectorAll (426)
  5. Create simple Website with PHP (387)