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

Question

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

Answer 1

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

, что сказал один из способов может быть:

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 2

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

Answer 3

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

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

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

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

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