A SIMPLE “SEE-THROUGH” LAYOUT, with multiple “windows” that reveal a single background image. This method could be adapted to a navigation system, among other things.

Inside a container div there are twelve internal divs. The container has a full width and height background-image. Each of the internal divs has border-radius:100% to make them round and a thick dark blue border. With the proper border:width and negative margin values it is possible to overlap them so that there are no gaps between them.

In general, for complete overlapping the border-width of each internal div has to be at least √2 (1.414...) times half the width of the divs. The margin is equal to half the border-width. In this case, we have div {width:100px;}, so the border-width is √2 times 50px = 72px (rounding up), and margin:-36px.

The width and height of the container div can be calculated according to the following formula: (div width + (2 × border-width) – (2 × margin)) × the desired number of rows or colums. (Obviously, you’ll need to insert the correct number of internal divs in your html.) The container also requires overflow:hidden or you will get a (perhaps not uninteresting) scalloped effect around the outside of the container.

I’ve added some simple hover effects (using pseudo-elements) to show how you might use this layout for a navigation system.