Как правильно перекрыть 2 слоя через z-index?

Question

[Алексей Скляров]

Есть макет, снизу и сверху страницы накладывается фон (высотой 1000пкс).
Решил реализовать через псевдоэлементы :before, :after. Прописываю их к body:

body:after {content:'';position: absolute;height: 1207px;width: 100%;background: url(img/footer-bg.png) no-repeat;bottom:0px;z-index: 1}

Аналогично и для body:before. Проблема в следующем, этот фон перекрывает футер и шапку, т.е нельзя выделить текст, ну и в общем все это выглядит не так как нужно. Если прописываю для всех блоков z-index > 1, толку никакого (как понял это потому. что они вложены в body).

Создал просто див в конце страницы и тоже через :after добавил фон, ситуация получается такая: фон налезает на фон блоков (должен быть под ним), но не налезает на текст, т.е если смотреть по слоям то выглядит это так: текст -> фон через :after -> фон блока -> фон контейнера. А должно быть так: текст -> фон блока -> фон через :after -> фон контейнера, Задание z-index для блока большим 1 тоже не увенчалось успехом. Как решить проблему правильно?

Answer 1

[Андрей Верх]

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

А для того что убрать элемент под родителя, before/after должны иметь z-index:-1 и родитель не должен иметь z-index'a

Comments

[Алексей Скляров]

z-index: -1 тоже не работает, он кидается вообще под весь сайт сразу, сейчас полистаю про множественные бэки

[Андрей Верх]

Алексей Скляров: Так и должно быть, если body родитель.
А вы не забываете случайно position:relative для блоков которым z-index даёте?

Answer 2

[Дмитрий Мельник]

body:before { z-index: -1; }??