Почему backgroundImage выступает за рамки браузера?

Question

[Ingernirated]

Задаю background-image: "100% 100%", а с низу появляется возможность прокрутить вправо, как так?
Как сделать эти 100% до края браузера?

Comments

[alex]

посмотрите какие значения может принимать background-image

[Ingernirated]

Alex: https://jsfiddle.net/x2zgzpr3/16/
почему, когда один блок, всё чётко, когда добавляешь второй, появляется эта возможность прокрутки вправо?

[alex]

Ingernirated:

'100% 100%'

нельзя такое значение задавать

[Ingernirated]

Alex: я пример скинул, там суть проблемы видна

[alex]

Ingernirated: описание вашего вопроса не имеет ничего общего с кодом по ссылке.

я пример скинул, там суть проблемы видна

внимательно прочитайте эту статью и поймете в чем у вас ошибка

не хочу ничего читать, хочу копипастить

one[i].style.width = document.documentElement.clientWidth + "px";
one[i].style.height = document.documentElement.clientHeight + "px";

[Ingernirated]

Alex: есть такая штука document.documentElement.clientWidth
но, когда я её подставляю для задавания размера, задает 1440,
но после вызываю чисто document.documentElement.clientWidth, уже 1423, почему?
как результат прокрутка остается, но если задать 1423 в ручную, то всё как надо

[Ingernirated]

Alex: https://jsfiddle.net/x2zgzpr3/20/

[Ingernirated]

Alex: Санёк, ты куда пропал? )
подскажи, пожалуйста, как в примере эту проблему разрулить

[alex]

Ingernirated: ну правильно, первый раз было 1440 т.к. прокрутки не было, а после как прокрутка появилась, стало 1423
P.S. я не санек :D

[alex]

Ingernirated:

как эту проблему разрулить

разрулить лучше через css, через js при resize будет некорректно применяться clientHeight, по крайней мере в хроме такая трабла

[Ingernirated]

Alex: так и как всё это дело задать, чтобы сразу с прокруткой вышло?

[alex]

Ingernirated: https://jsfiddle.net/f4ocguv4/

[Ingernirated]

Alex:

document.documentElement.style.overflowY = 'scroll';

что это значит?

[alex]

Ingernirated:

html {
  overflow-y: scroll;
}

[Ingernirated]

Alex: спасибо!!

[Ingernirated]

Alex: подскажи ещё пожалуйста такой момент
https://jsfiddle.net/f4ocguv4/10/
когда уменьшаешь браузер, снизу появляется видимость второго блока, но при увеличении, всё как надо, виден только один(первый блок), как с этим бороться и добиться при уменьшении браузера стабильно вид только первого блока на весь браузер?

[alex]

Ingernirated: я про это и говорил

через js при resize будет некорректно применяться clientHeight

spoiler

возможно это из-за того, что при уменьшении вьюпорта, на какой-то очень быстрый момент появляется горизонтальный скролл, который отнимает 17px(зависит от браузера и ОС) от clientHeight - поэтому получается, что все блоки становятся меньше по высоте. но это не точно. разбираться в этом не вижу смысла, так как то что ты пытаешься сделать, спокойно реализуется на css

[Ingernirated]

Alex: а как на css это сделать?
100% верх и низ всегда при изменении браузера?

[alex]

Ingernirated:
https://jsfiddle.net/ur3tb1Lx/
https://jsfiddle.net/vvuuagx9/

[Ingernirated]

Alex: а почему с телефонами или планшетами это не действует и видно 2 блока, когда он по вертикали?

[Ingernirated]

Alex: а что означает звездочка?

[alex]

Ingernirated: у меня все ок

а что означает звездочка?

https://webref.ru/css/selector/universal

[Ingernirated]

Alex: спасибо!!

[Ingernirated]

Alex: у меня с bg, если это просто блок с цветом тоже нормально на телефон вышло, а если на bg картинки, то почему-то 3 блока с картинками сразу показывает

Answer 1

[KnightForce]

width: some value;
height: some value;
backgrounds image: url(some URL);
background-size: 100% 100%;
background-repeat: no-repeat;