- Trending Categories
- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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
<!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>
Advertisements