Position CSS Background Image X Pixels From The Right Or Left
July 28, 2020 by Andreas Wik
If you want a background image to be positioned in the center vertically and all the way to the right of your element, you can easily do this using:
background-image: url("my-image.png");
background-repeat: no-repeat;
background-position: right center;
But sometimes that’s not enough. Let’s say I want it to the right, but not all the way to the edge. I want it 15px from the right. To achieve this, add this value after right.
background-position: right 15px center;
Of course you can do the exact same thing with left…
background-position: left 15px center;
…and top/bottom:
background-position: right 15px top 5px;
Playground:
See the Pen Position background image X pixels from the right by Andreas Wik (@andreaswik) on CodePen.
Share this article
