1

Подскажите, пожалуйста, как средствами 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, а именно про повторяющийся фон со смещением картинки, которая повторяется.

6
  • 1
    а на linear-gradient не вариант ?
    – user33274
    29 июн 2018 в 13:40
  • 1
    саму картинку делать со смещением внутри svg. Или множественные фоны использовать.
    – Qwertiy
    29 июн 2018 в 13:50
  • Смещение внутри svg не решило проблему. 29 июн 2018 в 13:58
  • 1
    Возможный дубликат вопроса: Как нарисовать простую шахматную доску?
    – user33274
    30 июн 2018 в 2:56
  • 1
    @МаксимЛенский, по ссылке всё сделано через js. В этом вопросе нет js, так что не думаю что это дубликат
    – Doofy
    3 июл 2018 в 3:03

2 ответа 2

4

body {
  background-color: white;
  background-image: linear-gradient( 45deg, black 25%, transparent 25%, transparent 74%, black 75%, black), linear-gradient( 45deg, black 25%, transparent 25%, transparent 74%, black 75%, black);
  background-size: 100px 100px;
  background-position: 0 0, 50px 50px;
}

2

Например, если использовать именно svg:

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 200 200' width='200' height='200'> <rect x='10' y='10' width='80' height='80' fill='#000' /><rect x='110' y='110' width='80' height='80' fill='#000'/></svg>") 
      0 0 repeat;

}

8
  • ачто тут находится в сниппете ? просто сиреневый фон ?
    – user33274
    29 июн 2018 в 14:13
  • @МаксимЛенский, prntscr.com/k0tylz вот что тут
    – SVE
    29 июн 2018 в 14:17
  • в Лисе не работает
    – user33274
    29 июн 2018 в 14:21
  • Как быть если изображение, хоть и SVG но несколько сложнее чем просто прямогугольник, и нету возможности дублировать копию ? (*По поводу не отображения в Лисе - там надо делать кодирование кода svg foxtools.ru/UrlEncoder ) На сколько я помню теги defs и use так не запихнешь 29 июн 2018 в 14:33
  • Не работает, просто голубой фон.
    – user245150
    3 июл 2018 в 17:35

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.