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.
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.
<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>
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>
<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>
The background-origin property specifies the positioning area of the background image. It takes three different values:
<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 specifies the painting area of the background, it is used to determine whether the backgrounds extends into the border or not.
<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>
background-image property (with the earliest image appearing closest to the user).
<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>
<table><tr> <th>Title 1</th> <th>Title 2</th> </tr></table>
.some_class {
line-height: 150%;
}document.getElementById("id_button").onclick = function(){
window.open("http://coursesweb.net/");
}$ar_dir = scandir("dir_name");
var_export($ar_dir);