Как background-image разделить на куски?

Question

[Ingernirated]

Как разделить фоновую картинку на небольшие секции?
Т.е. , чтобы она была как пазл и мы могли манипулировать отдельными её кусками.

Answer 1

[Glorious Cat]

https://webref.ru/css/background-position + https://webref.ru/css/background-size

Comments

[Ingernirated]

мне нужна одна картинка, которая разделена на 10 или 20 маленьких частей, а не одна маленькая картинка

Answer 2

[forspamonly2]

я для другого вопроса пример показывал

Есть ли плагин которые создает анимацию появления изображения из квадратов?

Comments

[Ingernirated]

а как там происходит разрезание картинки?
а то код смотрю, а въехать не могу, где суть.

[forspamonly2]

там внутрь натолкана куча одинаковых элементов, каждому из которых задан свой кусок фона тем самым background-position

[Ingernirated]

forspamonly2, т.е., чтобы сделать такое, надо изначально картинку порезать в ручную в редакторе, а потом уже её из кучи картинок собрать в одну?
но у тебя там только одна ссылка на картинку же.

[forspamonly2]

не надо ничего резать. каждому мелкому элементу фоном присвается вся большая картинка, но смещается на нужное конкретному элементу место, чтобы у каждого была видна своя часть. тем самым css свойством background-position, про которое и я уже говорил, и на документацию на русском в соседнем ответе ссылку дали.

[Ingernirated]

forspamonly2,подскажи пожалуйста, а как в % это задать? )
у меня криво нарезается картинка.
хотя разделил по горизонтали на 10 частей по 10%, но выходит со сдвигом как-то

[forspamonly2]

минус забыли, наверное? смещение отрицательное должно быть

[Ingernirated]

forspamonly2, какой минус?
т.е. я взял первые 10 частей(верхние)
и дал им каждому позицию фона
top:0; для всех
1)left:0;
2)left:10%;
3)left:20%
и так до 90, т.е. 10 кусков

И у меня нарезалось со странными сдвигами с несостыковкой.
Просто там ещё суть в том, что когда делил блок на 10, там не ровные числа выходили, а с десятичными частями(типа 141.1) и мне показалось, что в этом проблема. Или нет?

[forspamonly2]

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