Как в css можно заполнить фон выбранным из общего спрайта изображением?
Если повторение нужно только по одной из осей, то может помочь border-image:
div {
height: 200px;
outline: 1px dotted red;
position: relative;
}
div:before {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
border-top: 64px solid;
border-image: url(//www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=256&d=identicon&r=PG) 64 64 0 round round;
}
<div>Тут может быть тест</div>
<img src="//www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=256&d=identicon&r=PG">
В настоящее время средствами только CSS не получится.
Может если вставить картинку в svg, потом svg встроить как-то так background-image: url('data:...')... Но это уже изврат. Что-то мне кажется производительность браузера при этом будет хуже чем при отрисовке обычной картинки
Сборка персонального компьютера от Artline: умный выбор для современных пользователей