CSS3 has the following three background properties we can use to style the element background.
background-clip specifies the painting area of the background images
background-size property sets the size of the background image.
background-origin property specifies the positioning area for the background images.
The background-clip property specifies the painting area of the background.
<!DOCTYPE html>
<html>
<head>
<style>
div {<!--from www .j a v a2s. c om-->
width: 200px;
height: 200px;
padding: 50px;
background-color: yellow;
background-clip: content-box;
border: 2px solid #92b901;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.
</div>
</body>
</html>
The code above is rendered as follows:
The values for background-clip can be one of the follows:
background-origin property specifies the positioning area for the background images.
The background image can be placed within the content-box,
padding-box, or border-box area.
+-----------------------------+ |border-box | | +--------------------+ | | |padding-box | | | | +--------------+ | | | | |Content-box | | | | | | | | | | | +--------------+ | | | | | | | +--------------------+ | | | +-----------------------------+
The following code shows how to use background-origin
for different values.
<!DOCTYPE html>
<html>
<head>
<style>
div {<!-- ww w. ja va 2 s. co m-->
border: 1px solid black;
padding: 35px;
background-image: url('http://placehold.it/100x100');
background-repeat: no-repeat;
background-position: left;
}
#div1 {
background-origin: border-box;
}
#div2 {
background-origin: content-box;
}
</style>
</head>
<body>
<p>background-origin:border-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>background-origin:content-box:</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>
The code above is rendered as follows:
background-size property sets the size of the background image.
The following code shows how to resize a background image.
<!DOCTYPE html>
<html>
<head>
<style>
body {<!--from w w w .ja va2 s . c o m-->
background: url(http://placehold.it/100x100);
background-size: 80px 60px;
background-repeat: no-repeat;
padding-top: 40px;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.
</p>
<p>Original image: <img src="http://placehold.it/100x100" width="224" height="162"></p>
</body>
</html>
The code above is rendered as follows:
The following example shows how to stretch the background image to completely fill the content area.
<!DOCTYPE html>
<html>
<head>
<style>
body {<!--from w ww .j a v a2s . c om-->
background: url(http://placehold.it/100x100);
background-size: 100% 100%;
background-repeat: no-repeat;
padding-top: 40px;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.
</p>
<p>Original image: <img src="http://placehold.it/100x100" width="224" height="162"></p>
</body>
</html>
The code above is rendered as follows: