Как сделать качественный backround из кусочков блоков?

Question

[eugene_d_dev]

Допустим, есть 5 блоков. Нужно, чтобы они разъезжались и съезжались воедино образуя единое изображения. У меня пока так себе получается. Погрешности и неровности остаются. Самое главное, чтобы это было адаптивным. То есть, есть ли смысл подбирать background-position и backround-size, допустим, формулой. Или же просто z-index выдвигать скрытую картинку с этим изображением.

;DDD Вот суть проблемы))

Comments

[eugene_d_dev]

Александр А: .hist_left > div{
background-image:url("/images/hist.jpg");
position:absolute;
top:0;
height:100%;
background-repeat:no-repeat;
background-size:auto 100%;
width:20%;
} ну и каждому диву +20% background-position

[Денис Инешин]

fajjet: покажите рабочий код в jsfiddle.

[eugene_d_dev]

Денис Инешин: Нету возможности. Кода слишком много. Я вообще в принципе спросил. Как лучше делать?

[Денис Инешин]

fajjet: ну хотя бы иллюстрацию нарисуйте. И не нужно приводить весь код, нужно только тот кусок что отражает вашу проблему.

[eugene_d_dev]

Денис Инешин: добавил картиночку)))

Answer 1

[Денис Инешин]

Почему бы, вместо извращений с 5 картинками не сделать одну?
jsfiddle.net/IonDen/u89e91oa
см. вариант 2

Comments

[eugene_d_dev]

Я так и делаю. Это не адаптивно.

[Денис Инешин]

fajjet: так если контейнер общий, то он растянется в высоту, даже если вы все ячейки в одну колонку поставите.

[eugene_d_dev]

Денис Инешин: Мне надо, чтобы у каждого отдельного блока был отдельный кусок изображения. Они все будут анимироваться.

[eugene_d_dev]

Денис Инешин: вот залил на хостинг strizament.div26.ru

[Денис Инешин]

fajjet: в общем понял, подумайте над другим эффектом, нужно делать одной картинкой всё же.