Иногда требуется сделать фон в клеточку (в виде шахматной доски), для подсветки прозрачных картинок, или же просто любого элемента / блока.
Для работы мы будем использовать 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 сдвинули фигурки фона, чтобы они стали клетками.
Ну собственно на этом все, удачной верстки Вам, таков путь!