Arrow

CSS Background Origin

AuthorHariom Prajapati

Pubish Date20 Aug 2022

categoryCSS

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