Is it possible to create a grid-like background in CSS without images or tables?

Question

I\'d like to create a background that looks something like an excel spreadsheet. White table cells, thin borders around each cell. I know how to do this easily with a single ima

Answer 1

I have searched also for this problem and i found a very good solution:

background-size: 40px 40px;    
background-image:repeating-linear-gradient(0deg, #fff, #fff 1px, transparent 1px, transparent 40px),repeating-linear-gradient(-90deg, #fff, #fff 1px, transparent 1px, transparent 40px);

To change the grid size, change the background-size and the last px option within the gradient. To change the grid width change the first px option within the gradient. First gradient is horizontal, second is for the vertical lines.

for this demo I recognized that the css option:

position: absolute

was required. I will build up my grid now and if I get more information I will add them within a comment.

Hope this helps :)

Answer 2

Use a background image; don't waste your time fiddling with markup. You're not going to get any more efficient than this:

background:url(data:image/gif;base64,R0lGODlhFAAUAIAAAMDAwP///yH5BAEAAAEALAAAAAAUABQAAAImhI+pwe3vAJxQ0hssnnq/7jVgmJGfGaGiyoyh68GbjNGXTeEcGxQAOw==);

Example.