Position CSS Background Image X Pixels From The Right Or Left

July 28, 2020 by Andreas Wik

Position background image x pixels from right or left

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

Recommended articles

@awikio