Format Code
Run Code
<!DOCTYPE html> <html> <head> <title>Let's Coding Example</title> </head> <style> .content-box { background-origin: content-box; background-color:green; background-image: url('/images/common/cutecat100x128.png'); border: 45px dotted darkred; padding: 80px; margin: 10px; height: 550px; width: 550px; background-repeat: no-repeat; } </style> <body> <div class="content-box"> Background Origin: Content Box - The background image or color will only extend to the outer edge of the content itself, not including the padding or border. This creates a clean look where the background is confined to the content area, ensuring that padding and borders remain unaffected by the background styling. This is ideal for designs where you want to emphasize the content area with a distinct background without impacting surrounding areas. </div> </body> </html>
console output