开发者

CSS - Background image positioning

开发者 https://www.devze.com 2023-01-25 22:14 出处:网络
Is it possible using CSS background-position: to position an image to the far right of an element, but then minus a few pixels so it\'s not right up against the edge? Without having to add a开发者_运维

Is it possible using CSS background-position: to position an image to the far right of an element, but then minus a few pixels so it's not right up against the edge? Without having to add a开发者_运维技巧 bit of padding to the actual image itself?

Thanks


Lets say your div is 1000px wide and you want it 5px from the right the code would be

background: url('image.jpg') no-repeat 995px 50%;

Edit:

As pointed out the code above does not accommodate for the size of the image.

Lets say your div is 1000px wide and your image is 100px wide and you want it 5px from the right the code would be

background: url('image.jpg') no-repeat 895px 50%;

Your positioning is Div Size - Image Size - desired spacing from right edge.


There is some hacky way. Just use background position to the far right:

background-position: right center;

and combine it with:

box-sizing: border-box; border-right: 5px solid transparent;

for 5px indentation from the right.

0

精彩评论

暂无评论...
验证码 换一张
取 消