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...