Search code examples
cssbackground-imagebackground-position

Push background position off screen to the left

enter image description here

The background is the red rectangle The screen is the black rectangle

(Fig1) is the original position of my background

If I want to push it all the way to the right, off-screen (Fig2), I just set

background-position: 100vw;

This works perfectly fine. However I want to do the same in reverse, push the background off screen to the left (Fig4). If I set the background-position like so

background-position: -100vw;

It does not work as expected (Fig3- bug) since the original point of background (0,0) is always top-left.

Could you guys show me how to achieve Fig4 position? Thanks

Solution

  • You can change the reference and use right 100vw

    body {
  margin:0;
  height:100vh;
  background:
    url(https://picsum.photos/id/1/200/200) right 99vw bottom 0 no-repeat;
}

    Related question for more details: Using percentage values with background-position on a linear gradient. You will also find a generic way to make the background outside of its container in the section Special cases