Как я могу правильно покрыть элемент <div> фоновым изображением?

АннаТ

Пользователь
Регистрация
11.08.14
Сообщения
1
Реакции
0
Баллы
1
Привет
У меня довольно сложное фоновое изображение, поэтому сложно совместить все элементы на странице с изображением. Хотя на большинстве экранов мне удалось выровнять все правильно, на некоторых экранах что-то смещается. В качестве решения я подумал о том, чтобы разделить фоновое изображение на три фрагмента изображения, каждый из которых должен быть помещен в тег
. Теги
расположены вертикально, один под другим, что является расположением по умолчанию.
Проблема в том, что я не могу правильно покрыть каждый тег
фоновым изображением. Таким образом, если я использую размер фона: содержат; в CSS с каждой стороны изображения есть поля, в результате чего между тегами
образуется пробел. Если я использую размер фона: обложка; вместо этого нет полей и пустого пространства, но фон не масштабируется вместе с окном. В зависимости от разрешения экрана оно может не поместиться, даже если окно браузера развернуто на весь экран, и могут появиться полосы прокрутки.
Есть ли способ закрыть окно браузера этими тремя фрагментами изображения так, чтобы между ними не было пустого пространства (например, при использовании background-size: Cover; ) и в то же время все правильно масштабировалось вместе с окном (например, при использовании размер фона: содержать)?
Кстати, я пытался удалить это пустое пространство, вводя отрицательное значение поля-верха или указав положение: относительное, а затем отрицательное значение верхнего края. В любом случае это работает, но только для определенного размера окна. При изменении размера окна (или попытке использовать экран с другим разрешением) все ломается.
Как я могу правильно покрыть элемент <div> фоновым изображением?
 
Сверху Снизу