clock  Mon - Sun 8.00 AM - 8.00 PM
mail  edu@teknowize.com
fb
instagram
play store
pinterest

More

CSS Background Clip

Imperial Advance Hero Image

CSS Background Clip

It is use to defines gapping between element and background (color or image).

 

Syntax -

background-clip: value;

 

values

 
border-box

This is default value

It is use to extend back ground behind the boarder

padding-box

It is use to extend back ground to inside edge of the boarder.

content-box  It is use to extend back ground to content box
Text It is use to set background only behind the text structure.(need prefix according to browser or OS like webkit, moz etc to run text value.)
Initial It is use to set back ground to default value

 

For example -

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Teknowize</title>

	<style>
		h1 {
			background-size: 75% 75%;
			background-image: linear-gradient(to right, blue 0%, red 100%), url('download.jpg');
			background-repeat: no-repeat;
			background-blend-mode: darken;
			height: 300px;
			width: 300px;
		}
	</style>
</head>

<body>
	<h1></h1>
</body>

</html>

 

Output

Background clip

CSS