codescracker


css

CSS3 Background Clip



« CSS3 Tutorial Next Tutorial »


The background-clip property is newly introduced in CSS3 to determine whether the background image extends into the border or not.

It takes either the border-box or padding-box value. When you use the border-box value, the background image extends to the border. This is the default value of the background-clip property.

The following code fragment shows how to use the border box value of the background-clip property :

<p style="background-color:silver; color:white; border:2em solid blue;
	border-style:dotted double; -webkit-background-clip:border-box;>

CSS3 background-clip Example

Let's look at the following example to understand how to handle CSS3 background-clip property :

<html>
<head>
	<title>CSS3 Background Clip Example</title>
</head>
<body>

<p style="background-color:silver; color:white; border:2em solid blue;
	border-style:dotted double; -webkit-background-clip:border-box;">
	CSS3 background-clip CSS3 background-clip CSS3 background-clip
	CSS3 background-clip CSS3 background-clip CSS3 background-clip
	CSS3 background-clip CSS3 background-clip CSS3 background-clip
	CSS3 background-clip CSS3 background-clip CSS3 background-clip
	CSS3 background-clip CSS3 background-clip CSS3 background-clip
	CSS3 background-clip
</p>

</body>
</html>

Here is the sample output of the above CSS3 background-clip property example code:

CSS3 Background Clip

However, in case of the value, padding-box, the background-image does not stretch to the border; the image appears up to the edge of the padding.

The following code fragment shows how to use the padding-box value of the background-clip property :

<p style="background-color:silver; color:white; border:2em solid blue;
	border-style:dotted double; -webkit-background-clip:padding-box;">

The complete version of the above code fragment is given below with output:

<html>
<head>
	<title>CSS3 Background Clip Example</title>
</head>
<body>

<p style="background-color:silver; color:white; border:2em solid blue;
	border-style:dotted double;-webkit-background-clip:padding-box;">
	CSS3 background-clip CSS3 background-clip CSS3 background-clip
	CSS3 background-clip CSS3 background-clip CSS3 background-clip
	CSS3 background-clip CSS3 background-clip CSS3 background-clip
	CSS3 background-clip CSS3 background-clip CSS3 background-clip
	CSS3 background-clip CSS3 background-clip CSS3 background-clip
	CSS3 background-clip
</p>

</body>
</html>

Here is the sample output produced by the above CSS3 background-clip example code:

css3 background image clip

« CSS3 Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test