Push background position off screen to the left

Question

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

did you try to use % instead of vw? – demkovych Sep 17 '19 at 12:38 — demkovych, Sep 17 '19 at 12:38
could you provide an example in some code sandbox? – demkovych Sep 17 '19 at 12:41 — demkovych, Sep 17 '19 at 12:41
can u plz send the entire code? – Manikandan2811 Sep 17 '19 at 12:44 — Manikandan2811, Sep 17 '19 at 12:44
Make a fiddle http://codepen.io/ – Jason Is My Name Sep 17 '19 at 12:50 — Jason Is My Name, Sep 17 '19 at 12:50

score 0 · Answer 1 · answered Sep 17 '19 at 12:59

Use a wrapper and then transform the background here I set to -90% but you can set to -100%:

<div class="body-bg"></div>
<div class="content"><h1>Some content</h1></div>

.body-bg {
  width: 50vw;
  height: 50vh;
  background: black;
  position: absolute;
  z-index: 0;
  transform: translateX(-90%); 
}
.content {
  position: relative;
}
h1 {
  color: red;
}

https://codepen.io/alexplummer/pen/JjPavBe

score 0 · Accepted Answer · answered Sep 17 '19 at 13:38

0

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

answered Sep 17 '19 at 13:38

Temani Afif

245,468
26
309
415

You make my day – coinhndp Sep 17 '19 at 13:46

Push background position off screen to the left

2 Answers2