Hariom Prajapati
20 Aug 2022
CSSIt 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
