Fortytwo Fortytwo - 2 months ago 10
CSS Question

Creating a css background pattern of little squares and controlling the opacity

How to replicate this image in css to serve as a background for text?

image

(It's kind of hard to see but they're individual squares, not dots.)

The squares should be transparent as well.

Also it is possible to code it to control the opacity of each horizontal line of squares in css?

pol pol
Answer

1. Here's one way of doing it using pseudo-elements, adjust the values to your liking:

Snippet:

html, body { margin: 0; padding: 0; width: 100%; height: 100%; }

.checkered-bg {
  width: 100%;
  height: 100%;
  color: white;
}

.checkered-bg::before, .checkered-bg::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: -1;
}

.checkered-bg::before {
  background-image:
    linear-gradient(black 50%, transparent 50%),
    linear-gradient(to right, grey 50%, black 50%);
  background-size: 20px 20px;
}

.checkered-bg::after {
  background-image: linear-gradient(black, transparent);
}
<div class="checkered-bg">CONTENT</div>

View on JSfiddle.



2. Another way to make the squares and have the area around them transparent. But in order to get the top rows more translucent you will need a solid color:

html, body { margin: 0; padding: 0; width: 100%; height: 100%; }

.checkered-bg {
  width: 100%;
  height: 100%;
  color: black;
}

.checkered-bg::before, .checkered-bg::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: -1;
}

.checkered-bg::before {
  background-image:
    linear-gradient(45deg, #808080 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #808080 75%);
  
  background-size:20px 20px;
  background-position:0 0, -10px -10px;
}


.checkered-bg::after {
  background-image: linear-gradient(#808080, transparent);
}
<div class="checkered-bg">CONTENT</div>

View on JSfiddle

Option #2 smaller squares - JSfiddle

Comments