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

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.