How to do with CSS a checkerboard type chess board for the Body?

Question

How to do with CSS a checkerboard type chess board for the Body?

Navigation

#1 by (3 votes)
#2 by (1 votes)
#3 by (1 votes)

2

I would like to put in the% w / o% a checkered background, type a chessboard covering the whole body.

I've tried <body> , but I could not ...

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    background-image: 
    repeating-linear-gradient(to bottom, black 0, black 20px, transparent 20px, transparent 40px),
    repeating-linear-gradient(to right, #fff 0, #fff 20px, black 20px, black 40px);
}

OBS: Using 1 million repeating-linear-gradient() s or div will not work, I need to apply to table background

html html5 css css3

asked by anonymous 03.08.2018 / 20:43

3 answers

1

Taking your idea and adapting it with some tips from the internet, I came up with this result:

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

Instead of squares, triangles (% with% in% with%)

03.08.2018 / 20:53

1

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    background:
      -moz-linear-gradient(45deg, #000 25%, transparent 25%,transparent 75%, #000 75%, #000 100%),
      -moz-linear-gradient(45deg, #000 25%, transparent 25%,transparent 75%, #000 75%, #000 100%);
    background:
      -webkit-linear-gradient(45deg, #000 25%, transparent 25%,transparent 75%, #000 75%, #000 100%),
      -webkit-linear-gradient(45deg, #000 25%, transparent 25%,transparent 75%, #000 75%, #000 100%);
    background:
      linear-gradient(45deg, #000 25%, transparent 25%,transparent 75%, #000 75%, #000 100%),
      linear-gradient(45deg, #000 25%, transparent 25%,transparent 75%, #000 75%, #000 100%);
    -moz-background-size:100px 100px;
    background-size:100px 100px;
    -webkit-background-size:101px 101px;
    background-position:0 0, 50px 50px;
}

Just missed the values source

03.08.2018 / 20:59

Values returned in comparison of strings in C Custom border for certain table columns

score 3 · Accepted Answer

After testing the colleagues solution I saw that there was a problem, which I believe to be rendering, in FireFox, Edge and IE. As seen in the image

MysolutionwastouseanSVGinline,insteadofbackground-image:Thatwaywithjustafewlinesyoucanmakeagridbackgroundeveneasiertocustomizethandonewithlinear-gradiente,norequestismadeontheserverbecausetheSVGisinlineanditwasalsopossibletomakeafallbackwithanotherbackgraundiftheuser'sbrowserdoesnotsupportSVG.(recomendoquetestemnoIEcasotenhaminteresseparaverqueeleusaosegundoURLcomobackgroundeignoraoprimeiro)

ofeachsquareyoucanhaveadifferentgradient...

body {
    background-image:
        url("data:image/svg+xml;utf8,\
            <svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'>\
                <rect fill='%23000' width='50' height='50' x='0' y='0' />\
                <rect fill='%23000' width='50' height='50' x='50' y='50' />\
                <rect fill='%23fff' width='50' height='50' x='50' y='0' />\
                <rect fill='%23fff' width='50' height='50' x='0' y='50' />\
            </svg>"),
        url(https://abrilveja.files.wordpress.com/2018/01/mallandro.png);
    background-size: 80px, cover;
}

Below a result shown the versatility of colors in bg if you want something different.

body {
    background-image:
        url("data:image/svg+xml;utf8,\
            <svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'>\
                <defs>\
                    <linearGradient id='grad1' x1='0%' y1='0%' x2='100%' y2='0%'>\
                        <stop offset='0%' style='stop-color:rgb(255,255,0);stop-opacity:1' />\
                        <stop offset='100%' style='stop-color:rgb(255,0,0);stop-opacity:1' />\
                    </linearGradient>\
                </defs>\
                <rect fill='url(#grad1)' width='50' height='50' x='0' y='0' />\
                <rect fill='black' width='50' height='50' x='50' y='50' />\
                <rect fill='blue' width='50' height='50' x='50' y='0' />\
                <rect fill='%23fff' width='50' height='50' x='0' y='50' />\
            </svg>"),
        url(https://abrilveja.files.wordpress.com/2018/01/mallandro.png);
    background-size: 30px, cover;
}

EDIT:

New technique

New solution using background-size , but does not work in IE or EDGE, you can consult your browser's support here

The technique is to put two pseudo elements in the body a fill and a rect and make them mix-blend-mode along with a ::before . The blend mode ::after causes the overlapping colors to invert, so where there is a black line passing over the other black line in the intercession between them will become a "white square", generating this chessboard effect

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

body::before, body::after {
    content:"";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: repeating-linear-gradient(to right, #000 0, #000 40px, #fff 40px, #fff 80px);
}
body::after {
    background-image: repeating-linear-gradient(to bottom, #000 0, #000 40px, #fff 40px, #fff 80px);
    mix-blend-mode: difference;
}