How to set the background image start from the upper left corner of the content using CSS?
Last Updated :
18 May, 2023
In this article, we will learn how to set the background image starting from the upper left corner of the content using CSS.
Approach: We use the background-image property of CSS to set the background image. And for putting it in the upper left corner, we will use the background-origin property to adjust the webpage’s background image. So to set the background image starting from the upper left corner of the content we set the background-origin property value to border-box or padding-box.
Syntax:
background-origin: border-box | padding-box
Example 1: In this example, we are using the above-explained approach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.gfg {
width: 60%;
border: 8px solid red;
padding: 200px;
background-image: url(
background-repeat: no-repeat;
background-origin: padding-box;
}
</style>
</head>
<body>
<div class="gfg"></div>
</body>
</html>
|
Output:
Example 2: Here is another example of the above approach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.gfg {
border: 8px solid red;
width: 60%;
padding: 200px 50px;
background-image: url(
background-repeat: no-repeat;
background-origin: border-box;
}
</style>
</head>
<body>
<div class="gfg"></div>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...