Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

CSS 3

Learn step by step



CSS3 Background

Some of the most interesting web designs you see online are composites made up of multiple images carefully overlaid one on top the other to get the right effect. Designers have to first create these images with software like Photoshop and carefully insert each piece into elaborately set up elements to create the correct overall feel.With the new background properties in CSS3 many such designs will become a lot easier to put together.

Background Size

The new CSS3 background-size property allows you to adjust the size of the background using either a fixed or relative size. Let us look at an example. We will use an image 200px x 200px as the background image for a box with dimensions 300px x 300px. We will do three versions with this image as the background. In the first one we will not make any changes to the background size. In the second one we will use relative size to have the image fill the elements background by setting the background-size property to 100% 100%. In the third version we will make the image smaller by setting the size the fixed size 100px 100px.


<html>
<head>
<style type= "text/css" >
#box1 {
height:300px;
width:300px;
background:#f0f0f0;
background-image:url("snowdrop.png");
background-repeat:no-repeat;
border:3px solid black;
}
#box2 {
height:300px;
width:300px;
background:#f0f0f0;
background-image:url("snowdrop.png");
background-size:100% 100%;
background-repeat:no-repeat;
border:3px solid black;
}
#box3 {
height:300px;
width:300px;
background:#f0f0f0;
background-image:url("snowdrop.png");
background-size:100px 100px;
background-repeat:no-repeat;
border:3px solid black;
}
</style>
</head>
<body>
<div id= "box1" style="color:red; font-weight:bold;">This is Normal Size:</div><br/>
<div id= "box2" style="color:red; font-weight:bold;">This Image stretched to fit the box</div><br/>
<div id= "box3" style="color:red; font-weight:bold;">This Image is smaller </div>
</body>
</html>

Output

This is Normal Size:

This Image stretched to fit the box

This Image is smaller
Background Origin

The background-origin property is used to determine how the background-position of a background in a certain box is calculated.

It takes three different values, border-box, padding-box and content-box. When you supply a value of padding-box, the position is relative to the upper left corner of the padding edge. With border-box it is relative to the upper left corner of the border, and content-box means the background is started from the upper left corner of the content. Gecko and WebKit based browsers use an outdated version of the spec, with the values border, padding and content.


<style>
#backgroundorigin
{
border:1px solid yellow;
padding:25px;
background-image:url('media/cborder.png');
background-repeat:no-repeat;
background-position:left;
background-origin:border-box;
}
#backgroundorigin1
{
border:1px solid yellow;
padding:25px;
background-image:url('media/cborder.png');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}
</style>
<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>

Output

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.
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.
background-clip

The background-clip property is used to determine whether the backgrounds extends into the border or not. The default is border-box, which means it DOES extend into it, but if you set it to padding-box, it does not. if you use content-box the background only extends to the content area. This value has been removed from the latest development version of the spec.

It's not just a pleasure to enter in this industry,
but we are blessed to offer an array of IT services and products that count us in unmatched category.
Our sole attention is to make a good move where we learn all new technology and thereby ease your job for quick and effective output.
Oriana IT Solutions presents world class services that will surely drive your business to a higher level. We deal with IT Services, Consulting, Mobility Products and Services by using Advanced Technologies. And if we are so sure about offering a flawless job then it is only because of years of experienced expertise who perfectly know when and what to do.


Related Videos