Create a checkered background using CSS

Question

Why can't you create a checkered background using something like this?

background-color:#ccc; background-image:linear-gradient(90deg, transparent 50%, #aaa 50%), linear-gradient(90deg, #aaa 50%, #ccc 50%); background-size:50px 50px,50px 50px; background-position:0 0, 0 25px; 

The idea is to stack alternating colors at the bottom of the striped square. This does not work, but it seems like it should be.

Answer 1

After many games and trying to do it in other ways, I really understood what you wanted to do :-). And you were very close. You had one problem: both of your gradients have 90deg , so they covered each other. There is also no need for a background color, since the gradient in the back has no transparency and covers everything.

 html { height: 100%; width: 100%; padding: 0; margin: 0; } body { height: 100%; width: 100%; padding: 0; margin: 0; background-image:linear-gradient(0deg, transparent 50%, #aaa 50%), linear-gradient(90deg, #aaa 50%, #ccc 50%); background-size:50px 50px,50px 50px; background-position:0 0, 0 25px; } 

Also see this great post on how to create the right chessboard: http://lea.verou.me/2011/02/checkerboard-pattern-with-css3/

Answer 2

Here's an exact copy of what the checkered background shows in a graphic design editor such as Photoshop or Illustrator. (ALL CSS)

 .checkered{ height: 240px; background: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), white; background: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), white; background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), white; background-repeat: repeat, repeat; background-position: 0px 0, 5px 5px; -webkit-transform-origin: 0 0 0; transform-origin: 0 0 0; -webkit-background-origin: padding-box, padding-box; background-origin: padding-box, padding-box; -webkit-background-clip: border-box, border-box; background-clip: border-box, border-box; -webkit-background-size: 10px 10px, 10px 10px; background-size: 10px 10px, 10px 10px; -webkit-box-shadow: none; box-shadow: none; text-shadow: none; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; -webkit-transform: scaleX(1) scaleY(1) scaleZ(1); transform: scaleX(1) scaleY(1) scaleZ(1); } 

You can see a working example in my pen here

Answer 3

Here is another tweak to this design, but with prejudice.

Please note that background size is essential for a smooth transition to this template.

 html { height: 100%; width: 100%; padding: 0; margin: 0; } body { height: 100%; width: 100%; padding: 0; margin: 0; background:repeating-linear-gradient(135deg, rgba(0,64,101,0.7) 40%, #004065 60%), repeating-linear-gradient(45deg, rgba(0,80,126,0.7) 40%, #004065 60%); background-size:12px 18px; background-position: 0 0; } 

To change the background color, change the second six-color color as in repeating linear gradients.

Hope this helps someone

Answer 4

This implementation gives a checkered background in Chrome, Firefox, and Safari:

 body { background-image: linear-gradient(45deg, #000 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #000 75%), linear-gradient(45deg, transparent 75%, #000 75%), linear-gradient(45deg, #000 25%, #fff 25%); background-size:100px 100px; background-position:0 0, 0 0, -50px -50px, 50px 50px; } 

This style defines a four-part background image. Each linear gradient defines a black triangle. Triangles are shifted so that they correspond to the shapes of squares (two triangles). The last linear gradient defines the color of the other two squares (negative space). The positioning of the third and fourth triangles is what makes it work. (Otherwise, they would be located on top of two other similar styles.) See the Result in the attached scripts (for a better understanding, replace # 000 with four different colors and change #fff to transparent):

http://jsfiddle.net/1o0f34hp

Applies to div: http://jsfiddle.net/1o0f34hp/1

However, there are apparently some gaps along the edges between the triangles in Firefox. This artifact is listed here:

background image, linear gradient, uneven cutting result should be smooth

I also implemented this as a React component, as shown below:

 let dark = '#777'; let light = '#ccc'; export const Checkerboard = styled.div' background-image: linear-gradient(45deg, ${dark} 25%, transparent 25%), linear-gradient(45deg, transparent 75%, ${dark} 75%), linear-gradient(45deg, transparent 75%, ${dark} 75%), linear-gradient(45deg, ${dark} 25%, ${light} 25%); background-size: ${props => '${props.size} ${props.size}'}; background-position: 0 0, 0 0, ${props => 'calc(${props.size} / -2) calc(${props.size} / -2), calc(${ props.size } / 2) calc(${props.size} / 2)'}; ';