Проблема с изображениями CSS

Question

У меня возникли некоторые проблемы с переносом, чтобы разместить 3 изображения на заднем плане, я имею в виду, у меня одно изображение сверху, на самом деле размер 2000x550 пикселей, затем мне нужно оставить 200px (по вертикали) и разместить другое изображение, которое также покрываетвесь центр и одно изображение в нижний колонтитул.

Как вы думаете, что лучше сделать полное изображение таким, какое оно есть?полный это около 30 КБ.Или есть способ разместить его с помощью css?

С уважением

Answer 1

Вы должны быть в состоянии достичь этого с помощью css z-index. Смотрите следующие ссылки для получения дополнительной информации:

W3C Школы объяснение z-индексов: http://www.w3schools.com/Css/pr_pos_z-index.asp

Четкое объяснение z-индекса из журнала Smashing Magazine: http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

Answer 2

Пример того, что вы собираетесь использовать с образцами изображений, было бы неплохо.Из вашего описания, хотя это звучит так, как будто вы неправильно реализовали z-index.Я предполагаю, что вам нужно объявить положение делителей, к которым вы добавляете z-индекс.Даже если это позиция: относительная, вы все равно должны объявить это, или z-index не работает.

- Изменить для реального ответа -

После просмотра ваших изображений этона самом деле это не так сложно реализовать.Вот как я бы это сделал -

1. Установите фон BODY на белый и зеленый / розовый / серый фон:

   body {background: URL (images /green-pink-gray_bg.png) #fff no-repeat;}

2. Установить фон DIV для серого изображения -

   div # grey {background: background:URL (images / gray_bg.png) #fff no-repeat;}

Нет необходимости устанавливать z-index для чего-либо, поскольку div с серым фоном уже "включен"верх "ТЕЛА страницы.Использование изображений PNG с прозрачным фоном позволит белому фону просвечивать везде, где он не покрыт одним из фоновых изображений.

Answer 3

Чтобы ответить на вопрос о том, как разместить изображение заголовка, лучшим способом было бы определить div с указанной высотой (заголовок высотой 550 пикселей мне кажется ужасно большим, но эй, это ваш сайт) и шириной (вероятно, установлен на 100%), и используйте свойство background-image css для размещения изображения там. Это предотвратит любую боковую прокрутку.