Create a checkerboard background pattern with CSS
How can you create a diamond checker board background in css and html?
One way to create a diamond checkerboard background in CSS and HTML is to use the CSS3 property of "background-size." This property allows you to control the size of the background image. You can set the background-size to "cover" or "contain." If you set the background-size to "cover," the background image will scale to be as large as possible so that the background area is completely covered by the image. If you set the background-size to "contain," the background image will scale to the largest size such that both its width and height can fit inside the background area.
Using the background image, repeat and position css property
The background-image
property in CSS is used to set an image as the background for an element. The image is set to fill the entire element, and will resize and stretch to fit the element's dimensions.
To set a background image using the background-image
property, you need to specify the image's URL. For example:
.element {
background-image: url(/path/to/image.jpg);
}
If you want the image to tile so that it fills the entire element, you can add the background-repeat
property with a value of repeat
:
.element {
background-image: url(/path/to/image.jpg);
background-repeat: repeat;
}
If you want the image to only display once and not tile, you can use the background-repeat
property with a value of no-repeat
:
.element {
background-image: url(/path/to/image.jpg);
background-repeat: no-repeat;
}
You can also control how the image is positioned within the element using the background-position
property. The default value is 0 0
, which means the image will be positioned at the top left of the element. You can move the image horizontally or vertically by changing the values. For example, to position the image at the bottom right of the element, you would use a value of 100% 100%
:
.element {
background-image: url(/path/to/image.jpg);
background-position: 100% 100%;
}
Example Code
The following example Creates a diamond checker board background pattern for the element checkerboard.
Create a checkerboard background pattern with CSS Demo
View Demo Full Screen View Demo New Tab
Create a checkerboard background pattern with CSS Code
HTML
<div class="checkerboard"></div>
CSS
.checkerboard {
width: 100%;
height: 400px;
background-color: #fff;
background-image: linear-gradient(
45deg,
#000 25%,
transparent 25%,
transparent 75%,
#000 75%,
#000
),
linear-gradient(
-45deg,
#000 25%,
transparent 25%,
transparent 75%,
#000 75%,
#000
);
background-size: 60px 60px;
background-repeat: repeat;
}
External Link for Create a checkerboard background pattern with CSS