Prev Page
Next Page  
CSS3 Backgrounds
CSS3 contains a few new background properties, which allow greater control of the background element.

The CSS3 provides several new properties to manipulate the background of an element like background clipping, multiple backgrounds, and the option to adjust the background size.

You will also learn about the following new CSS3 properties:

1. background-size
2. background-origin
3. background-clip
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 Backgrounds</title>
<style type="text/css">
.css3_background{ 
width:300px; 
height:152px; 
background:url(images/bg_1.jpg) no-repeat; 
background-size: contain; 
border: 2px solid #0099da; 
color:#FFF; 
padding:10px;
} 
</style>
</head>

<body>

<div class="css3_background">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</div>

</body>
</html>
Output :
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
CSS3 Multiple Backgrounds
CSS3 gives you ability to add multiple backgrounds to a single element. The backgrounds are layered on the top of one another. The number of layers is determined by the number of comma-separated values in the background-image or background shorthand property.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 Multi Backgrounds</title>
<style>
.css3_multibackground { 
background-image: url(images/m_b_1.jpg), url(images/m_b_2.jpg);
background-position: left top, left top;
background-repeat:no-repeat, repeat;
padding: 10px;
color:#FFF;
}
</style>
 
</head>
<body>
 
<div class="css3_multibackground">

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>

</div>

</body>
</html>
Output :

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

  Prev Page
Next Page