Home > Developer > Web Develop
The background-origin is used to specify the relative position of the element background image, which has three attribute values:
1, Border-box
Border-box indicates that the element background image is positioned relative to the border region.
The code is as follows:
<!doctype html>Font-size:100px;font-weight:bold;background-origin:border-box;] </style>The effect is as follows:
As you can see, the background image of the element is positioned from the bounding area.
2, Padding-box
Padding-box indicates that the element background image is positioned relative to the padding region.
The code is as follows:
<!doctype html>Font-size:100px;font-weight:bold;background-origin:padding-box;] </style>The effect is as follows:
As you can see, the element background image is positioned from the padding area.
3, Content-box
Content-box indicates that the element background image is positioned relative to the content area.
The code is as follows:
<!doctype html>Font-size:100px;font-weight:bold;background-origin:content-box;] </style>The effect is as follows:
As you can see, the initial position of the background image of the element is positioned from the content area.
In summary, the Background-origin attribute defines the relative positioning position of the background image, which can be changed with background-position, and the area of the element background image is not limited and only works on the element background image. This property is invalidated if the element uses the Background-attachment property.
Use of Background-origin properties in CSS
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
