Как заставить CSS спрайт дублировать часть картинки по горизонтали?

Question

[weranda]

Не могу понять как повторять фрагметр спрайта.



Возьмем условный спрайт 8х8 пикселей. Внутри спрайта черный квадрат внутри белого квадрата, снаружи синий квадрат. Как использовать черный квадрат втури белого (или белый с черным внутри; одно и тоже) в этом спрайте, чтобы растянуть его по ширине так, чтобы части синего квадрата не отображались.
Должно получиться вот что:



По всякому пробовал, не получается(
Как-то надо повторить, а как?
Для примера, код на jsfiddle без картинок

Comments

[copal]

Выстроить их и всем задать hidden... а потом visible устанавливать.

[weranda]

copal: Не понял вас. Можно подробнее?

[copal]

weranda: Вы очень непонятно объяснили, поэтому вот как понял я -
https://codepen.io/anon/pen/YwjPJd?editors=1100

Answer 1

[weranda]

Всем спасибо. Понял, что в моем случае проще добавить в спрайт нужную длинную картинку.

Comments

[Евгений]

напишите код

[weranda]

Обычный код для CSS спрайта, ничего радикального, все банально.

.tag:before{
content: '';
background: url("my-sprite.gif") repeat-x;
background-position: 0 0;
display: block;
width: 100%;
height: 1px;
}

Надо было из одной точки сделать много точек, но приведенные варианты не подошли.