CSS3 Background
CSS3 Background
CSS3 contains several new background properties to provide greater control over background elements.
In this chapter you will learn about the following background properties:
background-imagebackground-sizebackground-originbackground-clip
You will also learn how to use multiple background images.
CSS3 background-image property
In CSS3, you can add a background image through the background-image property.
Different background images and images are separated by commas, and the one displayed at the top of all images is the first one.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
#example1 {
background-image: url(../style/images/img_flwr.gif), url(../style/images/paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
</style>
</head>
<body>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>You can set multiple different attributes for different images
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
#example1 {
background: url(../style/images/img_flwr.gif) right bottom no-repeat, url(../style/images/paper.gif) left top repeat;
padding: 15px;
}
</style>
</head>
<body>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>CSS3 background-size attribute
background-size specifies the size of the background image. Before CSS3, the background image size was determined by the actual size of the image.
Background images can be specified in CSS3, allowing us to re-specify the size of the background image in different environments. You can specify the size in pixels or percentage.
The size you specify is a percentage of the width and height of the parent element.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
body
{
background:url(../style/images/img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
padding-top:40px;
}
</style>
</head>
<body>
<p>
Lorem ipsum，中文又称“乱数假文”， 是指一篇常用于排版设计领域的拉丁文文章 ，主要的目的为测试文章或文字在不同字型、版型下看起来的效果。
</p>
<p>原始图片: <img src="http://img.taopic.com/uploads/allimg/140724/235067-140H402343186.jpg" alt="Flowers" width="224" height="162"></p>
</body>
</html>CSS3 background-Origin attribute
The background-Origin attribute specifies the location area of the background image.
Background images can be placed in the content-box, padding-box, and border-box areas.
CSS3 Multiple Background Images
CSS3 allows you to add multiple background images to the element
Add multiple background images.
CSS3 background-clip property
The background-clip background clipping property in CSS3 starts drawing from the specified position.
New background attributes
background-clip Specifies the drawing area of the background. 3
# Background-Origin specifies the positioning area of the background picture.
background-size Specifies the size of the background image. Next Section
