- In CSS (Cascading Style Sheets), the background-origin property is used to specify the positioning origin of the background images and background color within an element. It determines where the background is positioned relative to the content, padding, and border of an element.
The background-origin property can accept the following values:
- padding-box: This is the default value. It positions the background relative to the padding edge of the element. The background starts from the inside edge of the border and extends to the outer edge of the padding.
- border-box: It positions the background relative to the border edge of the element. The background starts from the inside edge of the border and extends to the outer edge of the border.
- content-box: It positions the background relative to the content edge of the element. The background starts from the inside edge of the border and extends to the outer edge of the content.
Here's an example that demonstrates the usage of the background-origin property:
- Program 01:
- Padding box: is the image start when padding is start on top left.
<!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>Document</title>
<style>
.maindiv {
width: 40vw;
border: 5px solid red;
padding: 50px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/800px-Image_created_with_a_mobile_phone.png");
background-size: 20%;
background-repeat: no-repeat;
background-origin: padding-box;
/* default */
}
</style>
</head>
<body>
<div class="maindiv">
<span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Est earum quidem distinctio, beatae officia
architecto dolor dignissimos sed cum magnam amet rerum laudantium delectus necessitatibus blanditiis harum
quasi aut repudiandae, illum explicabo? Voluptatum qui amet est! Expedita quidem iste animi aut eaque, dicta
sit. Voluptate similique velit aliquam placeat minima blanditiis odio exercitationem explicabo ducimus
molestiae vel sapiente enim, tenetur voluptatibus soluta obcaecati! Reiciendis, dolor aperiam? Incidunt
velit ipsa aliquam recusandae aperiam delectus et inventore quia magni, similique nemo, obcaecati, explicabo
aut ratione! Odit ea ducimus maxime eaque architecto quos nam neque optio, similique obcaecati, esse
deserunt delectus hic a.</span>
</div>
</body>
</html>
- Output:
- Program 02:
- Border box: is the image start when border is start on top left.
<style>
.maindiv{
width: 40vw;
border: 5px solid red;
padding: 50px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/800px-Image_created_with_a_mobile_phone.png");
background-size: 20%;
background-repeat: no-repeat;
background-origin: border-box;
}
</style>
- Output:
- Program 03:
- Content box: is the image start when content is start on top left.
<style>
.maindiv{
width: 40vw;
border: 5px solid red;
padding: 50px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/800px-Image_created_with_a_mobile_phone.png");
background-size: 20%;
background-repeat: no-repeat;
background-origin: content-box;
}
</style>
- Output:
No comments:
Post a Comment