CSS3 Backgrounds, TutorialsPoint, CSS3 Backgrounds Tutorial

CSS3 Tutorial

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

CSS3 Tutorial