How do I make my image start after css padding?

hoodedvul

This article demonstrates the various values of the CSS background-origin element. It shows the use of content-box and border-box values.

Using the demo code.

HTML.

...
 <div>
        <h1>Good Morning HTML</h1>
    </div>
...

CSS.

...
 div {
           width: 400px;
           height: 400px;
           border: 10px double blueviolet;
           margin: 100px auto;
           color: #fff;
           background-image: url(images/rose.jpeg);
           background-origin: content-box;
           background-repeat: no-repeat;           
      }
...

Using the background-origin: content-box CSS property, the result is the image appears after the padding.

Using the background-origin: border-box CSS property, the result is the image appears from the border.

The default is start the image inclusive of the padding. Which is the CSS value background-origin: padding-box To demonstrate this we used a double border.