Background position

?> Background：:point_right: background-position, background-origin, calc

<script v-pre type="text/x-template" id="extended-bg-position"> <style> main{ width: 100%; padding: 80px 0px; display: flex; flex-wrap: wrap; justify-content: space-around; } div{ width: 229px; height: 139px; margin: auto; color: #f4f0ea; padding: 16px 29px 28px 20px; background: #b4a078 url('static/[email protected]') no-repeat bottom right / 78px 21px; } div:nth-of-type(1){ background-position: right 29px bottom 28px; } div:nth-of-type(2){ background-origin: content-box; margin: 29px 0; /* Vertical alignment for the mobile */ } div:nth-of-type(3){ background-position: calc(100% - 29px) calc(100% - 28px); } </style>

background-position scheme

background-origin scheme

calc scheme

<script> </script> </script>

Browser Support

<iframe width="100%" height="436px" frameborder="0" src="https://caniuse.bitsofco.de/embed/index.html?feat=calc&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false"> </iframe> <iframe width="100%" height="480px" frameborder="0" src="https://caniuse.bitsofco.de/embed/index.html?feat=css-background-offsets&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false"> </iframe>