CSS3 background

wang xiao bo 's photo
wang xiao bo
·

3 min read

Several new background properties are included in CSS3 to provide greater control over background elements. In this chapter you will learn about the following background attributes:

  • background-image
  • background-size
  • background-origin
  • background-clip

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 top one of all the pictures is the first one.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>learn css</title> 
<style>
#example1 {
    background-image: url(img_flwr.gif) right bottom no-repeat, url(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 property

background-size specifies the size of the background image. Before CSS3, the size of the background image was determined by the actual size of the image. The background image can be specified in CSS3, let us re-specify the size of the background image in a different environment. You can specify the size in pixels or percentages. The size you specify is a percentage relative to the width and height of the parent element.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>learn css</title> 
<style> 
body
{
    background:url(/try/demo_source/img_flwr.gif);
    background-size:80px 60px;
    background-repeat:no-repeat;
    padding-top:40px;
}
</style>
</head>
<body>
<p>
Lorem ipsum，Chinese also known as "random number fake text", refers to a Latin article commonly used in the field of typesetting and design. The main purpose is to test the effect of the article or text in different fonts and layouts。
</p>

<p>Original Picture: <img src="/try/demo_source/img_flwr.gif"  alt="Flowers" width="224" height="162"></p>

</body>
</html>

CSS3 background-origin property 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.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>learn css</title>
<style> 
div
{
    border:1px solid black;
    padding:35px;
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-position:left;
}
#div1
{
    background-origin:border-box;
}
#div2
{
    background-origin:content-box;
}
</style>
</head>
<body>

<p>The relative position of the background image bounding box:</p>
<div id="div1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

<p>The relative position of the content frame of the background image:</p>
<div id="div2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

</body>
</html>
CSS3