Negative Circles Background

This particular test uses a small, square white graphic with circles "removed" from it so that a background color I chose for the page body would "shine through".

  Graphic: bg-neg-circ.png

Some Ideas do not work as expected. The background gray, which has a hexidecimal value: #cccccc, sort of a neutral gray, is showing through, but it just looks like a bunch of gray circles on a white background. It doesn't seem particularly "negative".

The sort-of-diamond pattern of the image is white, so against the default body background of "none" (which shows as white, generally), the background will just look white.

Background colors and patterns from an image can be used for other elements, not just the whole <body> background.

The next stripe is a paragraph with no text, just filled (having a background) the same as the whole page does.

Take care with combining background images with text, though. You can cause poor contrast, if you are not careful.

   Poor contrast is tough to read, so...    Design for effective contrast.

The section of the page you are reading is a division called "main" whose style has margins to reveal the background, and padding to give the paragraphs of text some whitespace :