Background Image Trickery

Scrolling effect with fixed background-attachment.

According to CSS, any background image that is “fixed” using background-attachment: fixed; is fixed with respect to the viewport-- not the element with which the image is associated. Eric Meyer

For more information about background-attachment: fixed see the classic complexspiral demo by Eric Meyer.

Just one background-image

The light-blue pattern fragments (in the tiling semi-transparent PNG background-image used here) have a 1px solid (white) border.

The containing elements have different background-colors: when transparent it picks up the white background-color from the HTML element, making the pattern appear as a solid flat pattern. When the same light-blue color from the image as background-color is used, then this will trick the eye by making the pattern-fragments appear as white outlines.

Ipsum exercitationem cum dolor aliquam nihil. Deserunt repellendus architecto veniam amet facere. Nam deleniti ipsam inventore culpa debitis? Labore rem fugiat veniam nihil nostrum hic eligendi optio? Officiis libero eos.

Ipsum exercitationem cum dolor aliquam nihil. Deserunt repellendus architecto veniam amet facere. Nam deleniti ipsam inventore culpa debitis? Labore rem fugiat veniam nihil nostrum hic eligendi optio? Officiis libero eos.

Ipsum exercitationem cum dolor aliquam nihil. Deserunt repellendus architecto veniam amet facere. Nam deleniti ipsam inventore culpa debitis? Labore rem fugiat veniam nihil nostrum hic eligendi optio? Officiis libero eos.

Ipsum exercitationem cum dolor aliquam nihil. Deserunt repellendus architecto veniam amet facere. Nam deleniti ipsam inventore culpa debitis? Labore rem fugiat veniam nihil nostrum hic eligendi optio? Officiis libero eos.

Ipsum exercitationem cum dolor aliquam nihil. Deserunt repellendus architecto veniam amet facere. Nam deleniti ipsam inventore culpa debitis? Labore rem fugiat veniam nihil nostrum hic eligendi optio? Officiis libero eos.

Ipsum exercitationem cum dolor aliquam nihil. Deserunt repellendus architecto veniam amet facere. Nam deleniti ipsam inventore culpa debitis? Labore rem fugiat veniam nihil nostrum hic eligendi optio? Officiis libero eos.