Navarr's Tech Side The Technical Side of my Life

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.