Шахматный фон на чистом CSS

Иногда требуется сделать фон в клеточку (в виде шахматной доски), для подсветки прозрачных картинок, или же просто любого элемента / блока.

Для работы мы будем использовать CSS градиенты фона правилом background-image, цвет фона background-color, размер background-size и позицию background-position.

Для начала выведем изображение с классом chess

<img class="chess" src="image.jpg" />

Далее все прописываем в css файле

img.chess {
    background-color: white;
    background-image: linear-gradient( 45deg, #e8e8e8 25%, transparent 25%, transparent 74%, #e8e8e8 75%, #e8e8e8), linear-gradient( 45deg,#e8e8e8 25%, transparent 25%, transparent 74%, #e8e8e8 75%, #e8e8e8);
    background-size: 30px 30px; 
    background-position: 0 0, 15px 15px;
}

Разбираемся что к чему

1. Цвет фона мы указали белым background-color: white;
2. С помощью функции linear-gradient мы создаем фигуры в background-image
3. В background-size мы указали размеры фона заливки, чтобы изменить размер клеток, меняем это правило.
4. И с помощью background-position сдвинули фигурки фона, чтобы они стали клетками.

Ну собственно на этом все, удачной верстки Вам, таков путь!