CSS - background-origin Property
The background-origin CSS property is used to set the origin of the background, which could be from the start of the border, inside the border or inside the padding.
Note: When background-attachment is set to fixed, the background-origin is ignored.
The property background-origin is similar to the property background-clip, except it resizes the background rather than clipping it.
Possible Values
border-box: Background is positioned relative to the border box.
padding-box: Background is positioned relative to the padding box
content-box: Background is positioned relative to the content box
Applies to
All the HTML elements.
DOM Syntax
object.style.backgroundOrigin = "border-box | padding-box | content-box"
CSS background-origin Example
The following example demonstrates how to use different background-origin values (border-box, padding-box, content-box) to set the origin of the background −
<html> <head> <style> div { border: 10px rgb(13, 7, 190); border-style: dashed; margin: 5px; padding: 1cm; font: 700 1em sans-serif; color: aliceblue; display: inline-block; background-image: url('images/yellow-flower.jpg'); height: 200px; width: 200px; } .border-box { background-origin: border-box; } .padding-box { background-origin: padding-box; } .content-box { background-origin: content-box; background-repeat: no-repeat; } </style> </head> <body> <div class="border-box">background origin border-box</div> <div class="padding-box">background origin padding-box</div> <div class="content-box">background origin content-box</div> </body> </html>
CSS background-origin - With Multiple Values
The following example demonstrates how to set multiple background origin using background-origin property −
<html> <head> <style> div { border: 10px rgb(13, 7, 190); border-style: dashed; padding: 1cm; font: 700 1em sans-serif; color: black; display: inline-block; background: url('images/white-flower.jpg'), url('images/tree.jpg'); background-origin: content-box, padding-box; background-repeat: no-repeat; height: 300px; width: 300px; } </style> </head> <body> <div> <p>background-origin: content-box and border-box</p> </div> </body> </html>
To Continue Learning Please Login
Login with Google