The background-clip property is used to determine whether the background image extends into the border or not, and the background-origin property is used to determine the starting position of the background in box like shape. the background-origin property allows you to specify the starting point of the position of your background image.
Create a Webpage named Backgroundcliporigin.html file
<!doctype html>
<head><title>Background Clip</title>
</head>
<body>
<p style="color:red;font-family:Arial;border:1em blue;border-style:dotted double;padding:20px;background-color:orange;background:url(sun.jpg);background-position:center left;-webkit-background-clip:border-box;-webkit-background-origin:border-box;">
Background Clip Set using Background Clip property
</p>
</body>
</html>
The background-clip property and the background-origin property of the p element are set to border-box
The Output is:
<!doctype html>
<head><title>Background Origin</title>
</head>
<body>
<p style="color:red;font-family:Arial;border:1em blue;border-style:dotted double;padding:20px;background-color:orange;background:url(sun.jpg);background-position:center left;-webkit-background-clip:padding-box;-webkit-background-origin:padding-box;">
<h3 style="font-size:50px">Background Clip Set using Background Clip property
</h3>
</p>
</body>
</html>
The Output of the background-origin property :
Create a Webpage named Backgroundcliporigin.html file
<!doctype html>
<head><title>Background Clip</title>
</head>
<body>
<p style="color:red;font-family:Arial;border:1em blue;border-style:dotted double;padding:20px;background-color:orange;background:url(sun.jpg);background-position:center left;-webkit-background-clip:border-box;-webkit-background-origin:border-box;">
Background Clip Set using Background Clip property
</p>
</body>
</html>
The background-clip property and the background-origin property of the p element are set to border-box
The Output is:
Modify the code of the p element as shown in the following code:
BackgroundOrigin.html
<head><title>Background Origin</title>
</head>
<body>
<p style="color:red;font-family:Arial;border:1em blue;border-style:dotted double;padding:20px;background-color:orange;background:url(sun.jpg);background-position:center left;-webkit-background-clip:padding-box;-webkit-background-origin:padding-box;">
<h3 style="font-size:50px">Background Clip Set using Background Clip property
</h3>
</p>
</body>
</html>
The Output of the background-origin property :
No comments:
Post a Comment