Skip to content
Related Articles

Related Articles

Improve Article

How to set the background image start from the upper left corner of the content using CSS?

  • Last Updated : 29 Apr, 2021

In this article, we will learn how to set the background image start 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 to the upper left corner, we will use the background-origin property that is used to adjust the background image of the webpage. So to set the background image starts 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:

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>
/sourcecode]
  
  
<p><strong>Output:</strong></p>
  
  
<p><strong>Example 2:</strong></p>
  
  

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :