100% height background starting at 50% horizontally

Like you already noticed and as I explained here background-position with percentage won’t behave like you may think.

An idea to achieve this is to consider adjusting background-origin like below:

.box {
  border:1px solid;
  background:url(https://picsum.photos/200/200?image=1069) left/100% auto no-repeat;
<div class="box">


the trick is to have the padding covering half the width and we start placing the background inside the content-box

Leave a Comment