Patterned Backgrounds & Background-Attachment

Something very crucial to most, if not every, website
layout is commonly overlooked by even some of the most experienced amateur web designers:  Using
Background-Attachment properly on Patterned Backgrounds.

When using a patterned
background, such as simple lines or a pattern, you generally don’t think about how it will affect the user’s
eyes or attention, but more so the way it will look, and generally you don’t specify anything more than a
background-image.  The default value for background-attachment
still exists, though – and it is scroll.

This is a bad thing for one major
reason.  A scrolling, patterned background distracts the user from the content of the
page.  A person’s eyes follow movement.  It catches there attention and
pulls them in.  This technique is often used for form elements, such as buttons, or navigation. 
However, when using a patterned background, this is a bad thing.  Instead of being able to focus on
the content of the page, the user’s eyes will instead be distracted by the moving background images, making
it harder, and slightly  more painful to see.

Continue reading to see and
compare the differences of the two styles.

background-attachment:
scroll;

background-attachment:
fixed;