HTML-CSS: Checkerboard background pattern
HTML-CSS : Exercise-29 with Solution
Using HTML, CSS creates a checkerboard background pattern.
- Use background-color to set a white background.
- Use background-image with two linear-gradient() values. Give each one a different angle to create the checkerboard pattern.
- Use background-size to specify the pattern's size.
- Note: The fixed height and width of the element is for demonstration purposes only.
HTML Code:
<!--License: https://bit.ly/3GjrtVF--><!-- Comment: Indicates the license information for the code -->
<!DOCTYPE html><!-- Comment: Declares the document type and version of HTML -->
<html><!-- Comment: Indicates the start of the HTML document -->
<head><!-- Comment: Contains meta-information about the HTML document -->
<meta charset="utf-8"><!-- Comment: Declares the character encoding for the document -->
<meta name="viewport" content="width=device-width"><!-- Comment: Sets the viewport width to the width of the device -->
<title>Using HTML, CSS creates a checkerboard background pattern</title><!-- Comment: Sets the title of the document -->
</head><!-- Comment: End of the head section -->
<body><!-- Comment: Contains the content of the HTML document -->
<div class="w3rcheckerboard"></div><!-- Comment: Defines a div for the checkerboard background pattern -->
</body><!-- Comment: End of the body section -->
</html><!-- Comment: End of the HTML document -->
Explanation:
- This HTML code creates a simple webpage with a div element to represent a checkerboard background pattern.
- The <!--License: https://bit.ly/3GjrtVF--> comment indicates the license information for the code. <!DOCTYPE html> declares the document type and version of HTML, which is HTML5.
- <html> marks the start of the HTML document.
- <head> contains meta-information about the HTML document, such as character encoding and viewport settings.
- The <title> element sets the title of the webpage.
- <body> contains the content of the HTML document.
- The <div class="w3rcheckerboard"></div> creates a div with the class "w3rcheckerboard" for the checkerboard background pattern.
CSS Code:
<style> /* Comment: Begins the CSS styling for the HTML document */
.w3rcheckerboard { /* Comment: Styles the element for the checkerboard background pattern */
width: 240px; /* Comment: Sets the width of the element */
height: 240px; /* Comment: Sets the height of the element */
background-color: #fff; /* Comment: Sets the background color of the element to white */
background-image: linear-gradient( /* Comment: Creates a linear gradient for the checkerboard */
45deg, /* Comment: Specifies the angle of the gradient */
#000 25%, /* Comment: Sets the color and position of the first color stop */
transparent 25%, /* Comment: Sets the color and position of the second color stop */
transparent 75%, /* Comment: Sets the color and position of the third color stop */
#000 75%, /* Comment: Sets the color and position of the fourth color stop */
#000 /* Comment: Sets the color of the fifth color stop */
),
linear-gradient( /* Comment: Creates another linear gradient for the checkerboard */
-45deg, /* Comment: Specifies the angle of the gradient */
#000 25%, /* Comment: Sets the color and position of the first color stop */
transparent 25%, /* Comment: Sets the color and position of the second color stop */
transparent 75%, /* Comment: Sets the color and position of the third color stop */
#000 75%, /* Comment: Sets the color and position of the fourth color stop */
#000 /* Comment: Sets the color of the fifth color stop */
);
background-size: 60px 60px; /* Comment: Sets the size of the background squares */
background-repeat: repeat; /* Comment: Specifies that the background pattern should repeat */
}
</style> /* Comment: End of the CSS styling */
Explanation:
- .w3rcheckerboard styles the element to create a checkerboard background pattern.
- width: 240px; sets the width of the element.
- height: 240px; sets the height of the element.
- background-color: #fff; sets the background color of the element to white.
- background-image: linear-gradient(...); creates two linear gradients to simulate a checkerboard pattern.
- background-size: 60px 60px; sets the size of each square in the checkerboard.
- background-repeat: repeat; specifies that the background pattern should repeat.
HTML-CSS Editor:
See the Pen html-css-practical-exercises by w3resource (@w3resource) on CodePen.
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics