CSS Programming ❯ Background-Origin & Background-Clip Properties

<!DOCTYPE html> <html><head> <meta charset="UTF-8"> <title>background-origin and background-clip Properties</title> </head> <body> <p style="width:600px; height:150px; background:url('https://i.imgur.com/mlCMnm9.jpg'); background-origin:padding-box; background-repeat:no-repeat; border:10px dotted #cc0000; font-size:1.2em; padding:20px;"> background-origin:padding-box <p style="width:600px; height:150px; background:url('https://i.imgur.com/mlCMnm9.jpg'); background-origin:border-box; background-repeat:no-repeat; border:10px dotted #009900;font-size:1.2em; padding:20px;"> background-origin:border-box <p style="width:600px; height:150px; background:url('https://i.imgur.com/mlCMnm9.jpg'); background-origin:content-box; background-repeat:no-repeat; border:10px dotted #cc0000; font-size:1.2em; padding:20px;"> background-origin:content-box <p style="width:600px; height:150px; background:url('https://i.imgur.com/mlCMnm9.jpg'); background-clip:padding-box; background-repeat:no-repeat; border:10px dotted #009900; font-size:1.2em; padding:20px;"> background-clip:padding-box background-clip:border-box <p style="width:600px; height:150px; background:url('https://i.imgur.com/mlCMnm9.jpg'); background-clip:content-box; background-repeat:no-repeat; border:10px dotted #009900; font-size:1.2em; padding:20px;"> background-clip:content-box </body></html>

background-origin and background-clip Properties

background-origin:padding-box

background-origin:border-box

background-origin:content-box

background-clip:padding-box

background-clip:border-box

background-clip:content-box