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

More

CSS Background Origin

Imperial Advance Hero Image

CSS Background Origin

It is use to set the origin position (positioning area of background image) of a background image.

 

Syntax - 

background-origin: value;

 

values

Border-box

In this background image starts from the upper left corner of the border.

padding-box In this background image starts from the upper left corner of the padding edge.
content-box In this background image starts from the upper left corner of the content.
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>background Origin</title>
	<style>
		h6 {
			border: 10px dashed lime;
			padding: 50px;
			background-position: center;
			background: url('https://www.teknowize.com/attachments/file_1660974725.jpg');
			background-size:100% 100%;
			background-repeat: no-repeat;
			background-origin: border-box;
		}
		pre{
			text-align: center;
			color: #fff;
			font-size: 32px;
		}
	</style>
</head>

<body>
	<h6>
		<pre>Welcome to Teknowize</pre>
	</h6>
</body>

</html>

 

Output

Background Origin

CSS