Как правильно сверстать несколько DIV'ов с фоном и наложением друг на друга?

Question

[Антон Салахов]

Всем привет.
Задача такая:
Есть сайт, который по структуре блоков похож на Landing Page. Блоки идут друг за другом стандартно.
У каждого блока в фоне разные картинки.
Вроде как все просто, но есть одно НО. У некоторых блоков на фоне стоит картинка не с горизонтальными краями, а с косыми.

На картинке, я думаю, будет ясно о чем я говорю:


Единственная мысль как это сделать - через position в CSS.
Если бы такой блок был один, то вроде как все понятно... У блока с "кривым" фоном прописываешь z-index больше и смещаешь его на нужный промежуток вверх. Затем третий блок так же поднимаешь на нужное расстояние.
Но когда таких блоков может быть несколько, то хотелось бы как-то эту систему структурировать... А вот с этим уже проблема...

Кто-то подобное делал?
Может будут еще какие-нибудь методы решения данной задачи?

P.S. верстаю с Bootstrap 3, хотя не думаю, что от этого что-то изменится.

Заранее спасибо!

Answer 1

[Michael]

Если я правильно вас понимаю:
1. Проблему смещений можно решить развешиванием на блоки общего класса, который и будет отвечать за смещение. .myClass { margin-top: - 100px; }
2. Вопрос с z-index'ом вы не решите "автоматически" никак. Откуда браузер будет знать, какой вы блок захотели положить выше, а какой ниже? Возможно, удобно будет создать 2-3 базовых класса в духе z-lvl-1, z-lvl-2... каждый последующий - с большим z-index'ом. И потом навешивать их на блоки в зависимости от необходимого расположения. position:relative, само собой, не забыть.