How to set the background image start from the upper left corner of the content using CSS?
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("https://media.w3wiki.net/wp-content/uploads/w3wiki-12.png"); 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("https://media.w3wiki.net/wp-content/uploads/w3wiki-12.png"); background-repeat: no-repeat; background-origin: border-box; } </style> </head> <body> <div class="gfg"></div> </body></html> |
Output:
Contact Us