CSS3 - new Background properties

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 (%)):

auto - is the default value. Scales the side of the image so that the aspect ratio of the image is maintained; if both values are auto, the image appears at its normal size.
percentage - Scales the height and width of the background image in percent of the parent element (not image's). The first value sets the width, the second value sets the height.
If only one value is given, the second is set to 'auto'.
pixels - Scales the height and width of the background image to the specified length.
If only one value is given, the second is set to 'auto'.
cover - The background image is sized so that it scales up (or down) to completely fill the background area.
contain - Scale the image to the largest size so that it is completely contained within the available space.

- 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:

padding-box - the position is relative to the upper left corner of the padding edge.
border-box - the position is relative to the upper left corner of the border.
content-box - the background is started from the upper left corner of the content.

- 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:

border-box - the background is clipped to the border box.
padding-box - the background is clipped to the padding box.
content-box - the background only extends to the content area.

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>

<<-Download CSS resources -- CSS3 - new Border ..->>

CSS3 - new Background properties

Css Course

background-size

Color Gradients

background-origin

background-clip

CSS3 Multiple Background Images

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Last accessed pages

Popular pages this month