Build a chessboard

vim, 47 46 44 43

crossed out 44 is still regular 44...

iP1 400 <C-p><cr><esc>50i1<esc>YpVr0yk3PyG49PyG:m$<cr>p2GyG3P
i          enter insert mode
P1         signal to NetPPM that we're using black&white (PBM) format
400        width
<C-p>      fancy trick that inserts the other 400 for height
<cr><esc>  exit insert mode on the next line
50i1<esc>  insert 50 '1's (black)
YpVr0      insert 50 '0's (white) by duplicating the line and replacing all chars
yk         copy both lines (yank-up)
3P         paste three times; this leaves us on line two
yG         copy from line 2 to end of file (this is a full row of pixels now)
49P        we need 50 rows of pixels to make a complete "row"; paste 49 times
yG         copy the entire row of the checkerboard
:m$<cr>    move line 2 (the line we're currently on) to the end of the file
           this gives us the "alternating rows" effect
p          we're now on the last line: paste the entire row we copied earlier
2G         hop back to line 2 (beginning of image data)
yG3P       copy the entire image data, paste 3 times

Outputs in NetPPM format (PBM):

output


CSS, 244 bytes

html{background:#fff}body{width:400px;height:400px;background:linear-gradient(45deg,#000 25%,transparent 25%,transparent 75%,#000 75%)0 0/100px 100px,linear-gradient(45deg,#000 25%,transparent 25%,transparent 75%,#000 75%)50px 50px/100px 100px}

html {
    background: white;
}
body {
    width: 400px;
    height: 400px;
    background:
        linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%) 0px 0px / 100px 100px,
        linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%) 50px 50px / 100px 100px
}

Explanation: A 100x100px diagonal linear gradient is created with four stops so that most of the gradient is transparent except for two 50px triangular corners. (See below snippet). Adding a second gradient with a 50x50px offset fills in the missing halves of the squares. Increasing the size of the body then allows the resulting pattern to repeat to fill the entire chessboard.

html {
    background: white;
}
body {
    width: 100px;
    height: 100px;
    background: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%) 0px 0px / 100px 100px
}


Mathematica, 34 bytes

ArrayPlot@Array[Mod[+##,2]&,{8,8}]

The output is a vector image and is surrounded in a frame.

Instead of correctly positioning 32 rectangles, we can just generate a binary matrix and make ArrayPlot work for us:

enter image description here