IHYPRESS PROGRAMMING
CSS examples with code and output for beginners
c programming
HOME | ASP | C | CSS | GNUPLOT | HTML | JAVASCRIPT | PERL | PHP | PYTHON | RUBY | SVG
CSS ❯ Background-Origin & Background-Clip Properties
<05>
<!DOCTYPE html> <html lang="en"><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> <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> <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> <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</p> <p style="width:600px; height:150px; background:url('https://i.imgur.com/mlCMnm9.jpg'); background-clip:border-box; background-repeat:no-repeat; border:10px dotted #cc0000;font-size:1.2em; padding:20px;"> background-clip:border-box</p> <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</p> </body></html>
Hergestellt in Deutschland / Made in Germany
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

COPYRIGHT © 2015-2024 IHY PRESS Frankfurt am Main 60329 Deutschland