With the reference of previous chapter now you may have familiarity with CSS3 Borders. In this chapter we will learn about the CSS3 Backgrounds, which is supported by all major browsers.
CSS3 Backgrounds
A CSS3 Backgrounds is an affords, which is used to resizing of the background properties. It is also used for multiple background implementation. Before developing of CSS3 it was unable to resize the background, but with the help of CSS3 We can implement these affords also.
There are mainly two properties of background, which can be used for background fixing, background size, multiple background image and etc.
Below are two properties that are used for background properties:
✔ background-size
✔ background-origin
✔ background-origin:border-box
✔ background-origin:content-box
background-size is a such property which is used to fix the size of a background. It can be either in pixel format or in percentage format.
Supported Browser
Below is complete syntax along with example
<!DOCTYPE html>
<html>
<head>
<title>Title Name will go here</title>
</head>
<style>
#background_size
{
background:url(media/flower.png);
background-size:100px 40px;
-moz-background-size:100px 40px; /* Firefox 3.6 */
-webkit-background-size:100px 40px;
background-repeat:no-repeat;
padding-top:40px;
}
</style>
<body>
<div id="background_size"> </div>
<div>
Here is the original image
<img src="media/flower.png" alt="image" title="original image"/>
</div>
</body>
</html>
background-origin is a such property which is used to define the position of the background. The background-origin properties is used the specify the area of the background, that's where it should be displayed on the page.
Supported Browser
Below is complete syntax along with example
<!DOCTYPE html>
<html>
<head>
<title>Title Name will go here</title>
</head>
<style>
#backgroundorigin
{
border:1px dotted green;
padding:25px;
background-image:url('media/cborder.png');
background-repeat:no-repeat;
background-position:left;
background-origin:border-box;
}
#backgroundorigin1
{
border:1px dotted green;
padding:25px;
background-image:url('media/cborder.png');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}
</style>
<body>
<div id="backgroundorigin">
This div containing the image with border-box property.
This div containing the image with border-box property.
This div containing the image with border-box property.
This div containing the image with border-box property.
</div>
<div id="backgroundorigin1">
This div containing the image with content box property.
This div containing the image with content box property.
This div containing the image with content box property.
This div containing the image with content box property.
</div>
</body>
</html>