Как правильно сверстать задний фон на одноэкранном сайте?

Question

[andrew46]

Необходимо сверстать каркас и задний фон для одноэкранного сайта без прокрутки по данному шаблону. Подскажите пожалуйста как грамотно это сделать? Чтобы сайт всегда оставался без прокрутки, а также был адаптивным под другие экраны.

Answer 1

[virek97]

Задать высоту нужного блока через «Viewport Units»:
height: 100vh;

Answer 2

[Pavstyuk]

Можно начать с этого

body {
  height: 100vh;
  overflow: hidden;
  background: url(/path/back.svg) no-repeat 50% 50%;
  bacckground-size: cover;
}

Где /path/back.svg путь к векторной картинке с нужным фоном в виде волны.

Comments

[andrew46]

Благодарю! А можете еще подсказать пожалуйста, стоит ли разбивать данный шаблон на две отдельные части - отдельно серая и отдельно тёмная? Или лучше их объединить и сохранять как одну картинку?

[Pavstyuk]

Как одна картинка родительского элемента. Не нужно усложнять.