Подскажите, пожалуйста, как средствами CSS создать повторяющийся фон, но со смещенной картинкой?
Приведу простой пример:
html{
height: 100%;
width: 100%;
}
body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: #CBDBFE url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='100' height='100'><path d='M12.5 12.6H89v76.5H12.5z'/></svg>") 0 0 repeat;
}
Как сделать чтобы объект повторялся со смещением?
Например, чтобы клетки шли в шахматном порядке?
Я пробовал увеличить ширину в два раза, но CSS заполняет построчно, и нужного результата я не добился.
Вопрос не про шахматный background
, а именно про повторяющийся фон со смещением картинки, которая повторяется.