Create Stunning Checkerboard Backgrounds with CSS

Introduction

In this lab, we will explore CSS programming to create a checkerboard background pattern. You will learn how to use CSS gradient techniques to design a visually appealing checkerboard pattern that can enhance various web projects. The checkerboard pattern is a classic design element consisting of alternating colored squares arranged in a grid, similar to a chess board.

By completing this lab, you will gain practical experience with CSS backgrounds, gradients, and pattern creation - skills that are valuable for modern web design.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/CodingStandardsandBestPracticesGroup(["Coding Standards and Best Practices"]) css/BasicConceptsGroup -.-> css/properties("Properties") css/BasicConceptsGroup -.-> css/values("Values") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") css/CodingStandardsandBestPracticesGroup -.-> css/comments("Comments") subgraph Lab Skills css/properties -.-> lab-35180{{"Checkerboard Background Pattern"}} css/values -.-> lab-35180{{"Checkerboard Background Pattern"}} css/colors -.-> lab-35180{{"Checkerboard Background Pattern"}} css/width_and_height -.-> lab-35180{{"Checkerboard Background Pattern"}} css/backgrounds -.-> lab-35180{{"Checkerboard Background Pattern"}} css/comments -.-> lab-35180{{"Checkerboard Background Pattern"}} end

Understanding the Project Files

Before we start creating our checkerboard pattern, let's examine the project files that have been provided in the VM.

Open the index.html file in the editor by clicking on it in the file explorer panel.

The initial HTML file should look like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Checkerboard Pattern</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- You will add your code here -->
  </body>
</html>

Now open the style.css file in the editor.

The initial CSS file should be empty or contain minimal styles:

/* CSS styles will be added here */

Let's start our development server to see the initial state of our webpage.

To view your webpage in the browser, click on the "Go Live" button in the bottom right corner of the editor. This will start a live server and display your webpage in the Web 8080 tab.

You should see a blank page at this point, as we haven't added any content or styles yet.

Creating the HTML Structure

Now that we understand our project files, let's create the HTML structure for our checkerboard pattern.

Open the index.html file in the editor again.
We need to add a container element for our checkerboard pattern. Inside the <body> tag, replace the comment with a <div> element that has a class of "checkerboard":

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Checkerboard Pattern</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="checkerboard"></div>
  </body>
</html>

Save the index.html file by pressing Ctrl+S or clicking File > Save.
Now, let's add some basic CSS to define the dimensions of our checkerboard. Open the style.css file and add the following code:

.checkerboard {
  width: 240px;
  height: 240px;
  background-color: #fff;
}

This CSS code does the following:

Sets the width and height of our checkerboard to 240 pixels
Sets the background color to white (#fff)

Save the style.css file.
Refresh the Web 8080 tab to see the changes.

You should now see a white square with a width and height of 240 pixels. This will be the canvas for our checkerboard pattern.

Creating the First Gradient

Now we'll start creating our checkerboard pattern using CSS gradients. Let's add the first linear gradient to create part of the pattern.

Understanding CSS Linear Gradients

CSS linear gradients allow you to create smooth transitions between two or more colors in a straight line. The linear-gradient() function takes an angle and a series of color stops as parameters. We'll use this technique to create our checkerboard squares.

Follow these steps:

Open the style.css file.
Let's modify our .checkerboard class to include the first linear gradient:

.checkerboard {
  width: 240px;
  height: 240px;
  background-color: #fff;
  background-image: linear-gradient(
    45deg,
    #000 25%,
    transparent 25%,
    transparent 75%,
    #000 75%,
    #000
  );
  background-size: 60px 60px;
}

Let me explain what this gradient does:

45deg specifies the angle of the gradient
#000 25% creates a black color from 0% to 25% of the available space
transparent 25% creates a transparent color starting at 25%
transparent 75% maintains the transparent color until 75%
#000 75% transitions back to black at 75% and continues to the end
background-size: 60px 60px sets the size of each repeating gradient cell

Save the style.css file.
Refresh the Web 8080 tab to see the changes.

You should now see a pattern starting to form, but it's not a complete checkerboard yet. The first gradient creates only a portion of the pattern. In the next step, we'll add a second gradient to complete the checkerboard.

Completing the Checkerboard Pattern

Now let's add the second linear gradient to complete our checkerboard pattern and make it repeatable across the entire element.

Open the style.css file again.
Modify the .checkerboard class to include a second linear gradient that will create the alternating pattern:

.checkerboard {
  width: 240px;
  height: 240px;
  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;
}

What we've added:

A second linear-gradient() that is similar to the first but with a -45deg angle to create the alternating pattern
The background-repeat: repeat property ensures that the patterns repeat across the entire element

The combination of these two gradients at different angles creates the classic checkerboard pattern. The first gradient creates one set of diagonal squares, while the second gradient creates another set that fills in the gaps.

Save the style.css file.
Refresh the Web 8080 tab to see the final result.

You should now see a complete checkerboard pattern with alternating black and white squares. The pattern should repeat across the entire 240px by 240px element.

How the Pattern Works

The checkerboard effect is created by:

Using two linear gradients with opposite angles (45deg and -45deg)
Each gradient creates a pattern of black squares at the corners
The transparent areas allow the white background to show through
The background-size property controls the size of each square in the pattern
The background-repeat property makes the pattern repeat across the entire element

This technique demonstrates the power of CSS gradients for creating complex patterns without the need for image files, resulting in faster loading times and better scalability.

Summary

Congratulations on completing the Checkerboard Background Pattern lab. In this lab, you have:

Created an HTML structure to host your checkerboard pattern
Learned how to use CSS linear gradients to create patterns
Combined multiple gradients at different angles to create a checkerboard effect
Applied sizing and repeating properties to perfect the pattern

This checkerboard pattern demonstrates a powerful CSS technique that can be applied to many web design projects. The approach you've learned - using gradients instead of images - results in faster loading times and better scalability for your web pages.

You can now use this knowledge to create other patterns and visual effects using CSS gradients. You might consider experimenting with:

Different colors for the checkerboard
Changing the size of the squares
Using different angles for the gradients
Creating other geometric patterns like stripes or dots

The techniques you've learned in this lab provide a foundation for creating sophisticated background patterns with pure CSS.