如何在CSS中制作1个图像图块？

Question

How can I make it so that a 100 by 100 image repeats itself all throughout the webpage. I want the image to duplicate itself and fill the screen.

for example lets say I had this picture:

and I wanted it to look like this:

The spacing doesn't matter, but how would I do this?

Answer 1

You would use a repeating background image in CSS. Then you can control the size of the image with background-size .

body {
    background: url('https://i.stack.imgur.com/LtCRM.png') center center repeat;
    background-size: 2em;
}

CodePen: http://codepen.io/oculusriff/pen/VmZdzg

Edit: As per nicovank's comment - if you are new to CSS, here is the separated version of the above code.

body {
    background-image: url('https://i.stack.imgur.com/LtCRM.png');
    background-position: center center;
    background-repeat: repeat;
    background-size: 4em;
}

Answer 2

This is the closest I got to what I wanted. Sorry for not wording the question right.

https://codepen.io/anon/pen/ZBzRaX

I don't know what is making it repeat, but I think it's this. Now I just have to figure out how to make the button fit the whole screen. The button is only a sliver at the top right now.

document.body.style.background = "url('"+links[i]+"')";