Css3 Background Property For Web Page

What is css3 background?

css3 contains some great property for background design. This property make any background more attractive and colorful. css3 background propertys are background-size, background-origin, background-clip . We will learn in this css3 background article about this three proerty in

details.  After that I also show you how to use multiple image by css3 background property. You can follow the css background article before this.

Browser support css3 background property:

Befor learn about this css3 background properties , you need to mind that which

css3 background

browser support this and which doesn’t.

Firefox 3.6 and earlier does not support the background-origin property.

Safari 4 requires the prefix -webkit- to support the new background properties.

Firefox 4, Chrome, Opera, Safari 5 and Internet Explorer 9 support the new background properties.

 

 

Css3 background size property:

This property helps to define the background image size. In css3 it is easy to indicate the size of background image.

Example:

<html>

<head>

<style type="text/css">

body

{background:url(http://h2cweb.net/demo/background/tringle.jpg);

background-size:250px 250px;

background-repeat:no-repeat;

padding-top:300px;}

</style>

</head>

<body>

<p>

formula : a^2 + b^2 = c^2. This formula describes how, for any right-angled triangle, the square of the length of the hypotenuse, c, (the longest side of a right triangle) equals the sum of the squares of the lengths of the other two sides (a and b).</p>

<p>Original image:<br/> <img src="http://h2cweb.net/demo/background/tringle.jpg" alt="css3 background size" width="150" height="150" /></p>

</body>

</html>

Output:   css3 background size property

 

Css3 background origin property:

This property mainly works for the positioning area of the background image. The background image can be placed within the content-box, padding-box, or border-box area.

Example:

<html>

<head>

<style type="text/css">

div

{border:1px solid black;

padding:35px;

background-image:url('http://h2cweb.net/demo/background/tringle.png');

background-repeat:no-repeat;

background-position:left;}

#div1

{background-origin:border-box;}

#div2

{background-origin:content-box;}

</style>

</head>

<body>

<p>background-origin:border-box:</p>

<div id="div1">

formula : a^2 + b^2 = c^2. This formula describes how, for any right-angled triangle, the square of the length of the hypotenuse, c, (the longest side of a right triangle) equals the sum of the squares of the lengths of the other two sides (a and b).</p>

</div>

<p>background-origin:content-box:</p>

<div id="div2">

formula : a^2 + b^2 = c^2. This formula describes how, for any right-angled triangle, the square of the length of the hypotenuse, c, (the longest side of a right triangle) equals the sum of the squares of the lengths of the other two sides (a and b).</p>

</div>

</body>

</html>

Output: css3 background origin property

Css3 background clip property:

This property has three value. The values are border-box, padding-box and content-box. You can understand their work after seeing the output of them.

Example:

<html>

<head>

<style type="text/css">

#content-box

{position:fixed;

width:200px;

height:200px;

padding:50px;

background-color:yellow;

background-clip:content-box;

border:2px solid #92b901;

}

#padding-box

{position:fixed;

width:200px;

height:200px;

padding:50px;

background-color:yellow;

background-clip:padding-box;

border:2px solid #92b901;

right:600px;

top:5px;

}

#border-box

{position:fixed;

width:200px;

height:200px;

padding:50px;

background-color:yellow;

background-clip:border-box;

border:2px solid #92b901;

right:150px;

top:5px;

}

p{position:fixed;

top:350px;

}

</style>

</head>

<body>

<div id="content-box"><b>content-box</b><br/>

formula : a^2 + b^2 = c^2. This formula describes how, for any right-angled triangle, the square of the length of the hypotenuse, c, (the longest side of a right triangle) equals the sum of the squares of the lengths of the other two sides (a and b).</p>

</div><br/>

<div id="padding-box"><b>padding-box</b><br/>

formula : a^2 + b^2 = c^2. This formula describes how, for any right-angled triangle, the square of the length of the hypotenuse, c, (the longest side of a right triangle) equals the sum of the squares of the lengths of the other two sides (a and b).</p>

</div>

<div id="border-box"><b>border-box</b><br/>

formula : a^2 + b^2 = c^2. This formula describes how, for any right-angled triangle, the square of the length of the hypotenuse, c, (the longest side of a right triangle) equals the sum of the squares of the lengths of the other two sides (a and b).</p>

</div>

<p>Though you can see that border box and padding box are equal, but they are not equal. padding box

cover color into padding with content but border cover color into the whole content+padding+border. </p>

</body>

</html>

Output: css3 background clip property

The background is important for web page. By the help of css3 background property you can convert simple background to best background. So the css3 background properties are very important.

Roy Jemee is a professional Blogger. Apart of blogging he likes to play with mathematics. He knows Blogging, Wordpress, PHP, javascript , SEO and some other.