Creating a seamless pattern with CSS on the web [closed]

Question

I am making a seamless CSS pattern on the web. I know this is totally nonsense and non-practical at all. But it is just for the sake of having fun.

http://codepen.io/vennsoh/pen/iFKyo

I have done creating my first tile. Now I am thinking of a way to repeat it to fill up the whole background.

Can I complete this feat by just using HTML and CSS? Or must I use javascript to complete this?

-

Here are my steps if using javascript, correct me or suggest better ways:

1. Calculate current browser width and height.
2. A single tile is (150x150), I will just need to create as many div(s) to cover the whole screen.

-

I might want to make things move around, each polygon changes color, etc. It won't be static. I am not looking for a background-image solution.

Thanks, Venn.

Answer 1

Actually this is possible with only html and css. The problem in your example is that every part of background will overlap when you set background-repeat property because they have different size, so you just need to resize and position your shapes differently. The easy way to do this in your case is set one background-size for every shape (size of desired complete pattern) and change their position accordingly.

I've modified part of your example to give you an idea of how it should look like: http://codepen.io/anon/pen/pnxyd

Answer 2

Just add,

float:left;

to the css, and then just make multiple copies of the div, just like here...http://codepen.io/anon/pen/rlDqh

I guess this should do the trick.