Teach with us

CSS padding-box Value

Use the CSS background-origin property to set the padding-box value. With the padding-box value, the background image begins from the upper left corner of the padding edge.

You can try to run the following code to implement the padding-box value:

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         #value1 {
            border: 3px solid blue;
            padding: 30px;
            background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);
            background-repeat: no-repeat;
            background-origin: padding-box;
         }
         #value2 {
            border: 3px solid orange;
            padding: 30px;
            background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);
            background-repeat: no-repeat;
            background-origin: border-box;
         }
         #value3 {
            border: 3px dashed yellow;
            padding: 30px;
            background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);
            background-repeat: no-repeat;
            background-origin: content-box;
         }
      </style>
   </head>
   <body>
      <h1>padding-box value</h1>
      <div id = "value1">
         <h2>Heading 2</h2>
         <p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.</p>
         <h3>Heading 3</h3>
         This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.</p>
      </div>
      <h1>border-box value</h1>
      <div id = "value2">
         <h2>Heading 2</h2>
         <p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.
         <h3>Heading 3</h3>
            This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.</p>
      </div>
      <h1>content-box value</h1>
      <div id = "value3">
         <h2>Heading 2</h2>
         <p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.
         <h3>Heading 3</h3>
            This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.</p>
      </div>
   </body>
</html>
Updated on 23-Jun-2020 15:49:33

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements