Несовместимые поля между двумя фоновыми изображениями

Question

Я пытаюсь создать два отдельных «слоя» фона, помещая содержимое моей веб-страницы в div. Слой фона, который я установил для div, обрезается до того, как достигнет края экрана, но тот, который установлен как обычное фоновое изображение тела, нет. Я не могу найти в своих HTML или CSS ничего, что могло бы повлиять на поля div. Установка min-height и min-width body на 100% создает переполнение.

HTML:

<div id="bg">
(content)
</div>

CSS:

#bg{
  background-image: url('bg1.png');
  background-size: 100% auto;
  margin: 0px 0px
}
body{
  background-color: #0000FF;
  background-image: url('bg2.png');
  background-repeat: repeat;
  background-size: 100% auto;
  color: white;
}

Изменить: Я исправил это, установив поля и отступ тела на 0 пикселей. Я делаю такой фон, чтобы можно было анимировать их отдельно.

Answer 1

Несколько соображений:

1. Какова высота div? : по умолчанию div имеет высоту только как высоту его содержимого. То есть, например, div с текстом в 5 строк имеет высоту всего 5 строк. Если фоновое изображение выше, чем высота div, оно также будет обрезано на этой высоте.

   • Предложение: Возможно, укажите div конкретную высоту или / и попробуйте background-size

2. Является ли div только для фоновых слоев? : Другими словами, можно ли background-image переместить в сам body, чтобы атрибуты background управлялись в тот же элемент?

   • Предложение: Возможно, используйте несколько background-image, как показано в MDN do c