How to properly set background width in css?

Question

css

I'm learning to type, I ran into a problem. When the width is set to 100vw, the bottom and right scroll will appear, while the elements "slide" under it (see arrows). How to correctly specify the width, just take into account the scroll (~ 15px)?

Answer 1

1. Put your code in the sandbox.
2. Are the green arrows completely glued to the right?
3. It is better to set the block width in%
ala

.fullscreen-bg {
  background: url(image.jpg);
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100vh;
}

VW Equivalent to 1% of the browser window width . Not viewports. The right scroll lies on top of the site

Since the width of the element specified with 100vw is greater than the width of the viewport, it's best to use a width of 100% to create full-screen background images, which will be equal to the width of the root html element.

Source - https://html5book.ru/edinicy-izmereniya-vh-vw-vmin...

Answer 2

Through calc, but in safari there is no scrollbar width and is it really necessary for you to use vw instead of %?