Два отдельных фоновых изображения

Question

Я хочу, чтобы на моей странице было два фоновых изображения: одно вверху и одно внизу.Я не хочу, чтобы они были статичными.Как бы я это сделал?

Answer 1

Создайте два вложенных слоя с нулевым полем и отступом, например:

<div class="outer">
  <div class="inner">
    <!-- Page goes here. -->
  </div>
</div>

Затем создайте отдельное фоновое изображение для внешнего и внутреннего, одно прикреплено к верху, другое - к нижнему:

.outer {
  background-position: bottom;
  // ...
}

.inner {
  background-position: top;
  // ...
}

Answer 2

Это действительно зависит от того, как вам нужна страница и как выглядят фоновые изображения.Если вы хотите решение , вам нужно опубликовать более подробно, желательно с составным изображением того, как должна выглядеть страница, и примером самих изображений.

, который может быть одним из следующих способов:

html {backgoround: trasnparent url(/path/to/image) scroll no-repeat top center;}
body {backgoround: trasnparent url(/path/to/other-image) scroll no-repeat bottom center;}

Answer 3

Используйте div с фоновыми изображениями и размещайте их соответствующим образом, используя макет или атрибуты позиционирования. Вы можете взять один для верха, поместить его в div, который абсолютно позиционирован и z-проиндексирован, чтобы быть под вашей обычной страницей. Затем другой можно поместить в стиль кузова и расположить внизу.