Setting the Background Image Clipping Style
Description
The clipping style determines the region where the background color and image are drawn in the element's box. The background-clip property controls this feature.
The allowed values are described in the following list.
- border-box - The background color and image are drawn within the border box.
- padding-box - The background color and image are drawn within the padding box.
- content-box - The background color and image are drawn within the content box.
Example
The background-clip property determines which
portion of the background is visible by applying a clipping box.
Anything outside the box is discarded and not shown. You can see the effect in the following code.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!-- w w w . ja v a 2s . c o m-->
border: 10px double black;
background-color: lightgray;
background-image: url(http://www.java2s.com/style/download.png);
background-size: 40px 40px;
background-repeat: repeat;
background-origin: border-box;
background-clip: content-box;
}
</style>
</head>
<body>
<p>This is a test.
This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
</p>
</body>
</html>