3

Gostaria de colocar no <body> um fundo quadriculado, tipo um tabuleiro de Xadrez cobrindo todo o body.

Tentei com repeating-linear-gradient(), mas não consegui...

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);
}

inserir a descrição da imagem aqui

OBS: Usar 1 milhão de divs ou table não vai servir, preciso aplicar no fundo do body

1
  • 1
    uma imagem levinha com repeat não ficaria bom? 3/08/2018 às 18:48

3 Respostas 3

5

Depois de testar a solução dos colegas vi que existia um problema, que acredito ser renderização, no FireFox, Edge e IE. Como visto na imagem

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

A minha solução foi usar um SVG inline, no lugar do background-image: Dessa forma com apenas poucas linhas é possível fazer um fundo quadriculado até mais fácil de customizar que o feito com linear-gradiente, não é feita requisição no server, pois o SVG está inline e também foi possível fazer um fallback com outro backgraund caso o browser do usuário não de suporte ao SVG. (recomendo que testem no IE caso tenham interesse para ver que ele usa o segundo URL como background e ignora o primeiro)

Segue o resultado básico. Lembrado que vc pode facilmente alterar o tamanho dos blocos pelo background-size E a cor de cada quadrado individualmente pelo fill do rect, Inclusive dentro de cada quadrado vc pode ter um gradiente diferente...

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;
}

Abaixo um resultado mostrado a versatilidade das cores no bg caso queira algo diferente.

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;
}


EDITE:

Nova técnica

Nova solução usando mix-blend-mode, porém não funciona no IE ou EDGE, vc pode consultar o suporte do seu browser aqui https://caniuse.com/#feat=css-mix-blend-mode

A técnica é colocar dois pseudo elementos no body um ::before e um ::after e faz neles o mix-blend-mode junto com um repeating-linear-gradient. O blend mode difference faz com que as cores sobrepostas se invertam, então onde tem uma linha preta passando sobre a outra linha preta na intercessão entre elas vai ficar um "quadrado branco", gerando esse efeito de tabuleiro de xadrez

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;
}

4
  • interessante, gerou os quadros alternados no svg bem legal :) mais claro de entender que o background com gradient 6/08/2018 às 17:54
  • @RicardoPontual pois é, ficou bem versátil e fácil de entender. Além de resolver o problema da "linha fantasma". []'s
    – hugocsl
    6/08/2018 às 17:57
  • Muito legal, mas esse segundo deu uma dor de cabeça, não precisava
    – Costamilam
    6/08/2018 às 18:04
  • @GuilhermeCostamilam foi só para testar as possibilidades rss, tentei até colocar um dos quadrados como uma imagem "embebedada" dentro do rect, mas acho que pelo estilo inline como usei não aceita. De qq forma ta ai uma solução alternativa
    – hugocsl
    6/08/2018 às 18:17
2

Pegando a sua ideia e adaptando com umas dicas da internet, cheguei nesse resultado:

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;
}

No lugar de quadrados, triângulos ( 45deg no linear-gradient)

4
  • No Chrome até ficou ok, mas no FireFox e no Edge ficou com uma "linha" branca atravessando os quadrados na diagonal... Parece algum tipo de problema de renderização ou algo do tipo. testa ai
    – hugocsl
    3/08/2018 às 20:42
  • a linha que faz o ajuste disso é -webkit-background-size:101px 101px;, incluir background-size: 101px 101px ou outro valor deve resolver 4/08/2018 às 16:48
  • Cara tentei vários valores ali e nada resolve, basta vc mesmo abrir com esse código no FireFox que vc vai entender o que estou falando... Já tentei em duas maquinas diferentes e o problema permanece. IE, EDGE e FF todos apresentam o problema...
    – hugocsl
    4/08/2018 às 18:02
  • Consegui uma solução que renderiza direito, é inline apesar de ser svg, tem fallback para IE, e é talvez mais fácil e versátil que linear-gradiente, mas valeu a força.
    – hugocsl
    6/08/2018 às 17:47
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;
}

Só errou os valores fonte

2
  • No Chrome até ficou ok, mas no FireFox e no Edge ficou com uma "linha" branca atravessando os quadrados na diagonal... Parece algum tipo de problema de renderização ou algo do tipo. testa ai
    – hugocsl
    3/08/2018 às 20:43
  • Jovem obrigado pela ajuda, mas resolvi usando un SVG inline como background e funcionou perfeitamente, é ainda mais fácil de customizar que com linear-gradiente e não da problema de renderização. Valeu a ajuda.
    – hugocsl
    6/08/2018 às 17:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .