Sunday, May 19, 2013

Tube view on Web Backgrounding

A single color is the simplest choice, but choosing a color is not simple. Pure white background or black might be mediocre. It can't be too bright, because it is subsidiary as the name indicates.

Not So White

If we go to ubuntu.com, press ctrl+shift+I (Chrome), navigate to body tag, here it might be

background: #fff url("/sites/ubuntu/latest/u/img/patterns/body_bg.jpg");

If you examine clearly (tilt your screen), body_bg.jpg is not a pure white image, otherwise it would be here. Yep, it is a seamless background image with patterns on it.

credit: ubuntu.com

Under Ubuntu, one may turn to GIMP for such mission (link). An excerpt is to use Filters > Map > Make Seamless, you can test it under Filters > Map > Tile in a bigger canvas (e.g., double-sized). Remind that the seamless background images come in squares so that they can be easily tiled.

Stripes

credit: ibelieveinadv.com

A 1px stripe is not alluring, but the arrangement of many of them might. See this website for instance (link), it uses

background: #2f2f2f url("http://www.ibelieveinadv.com/commons/stripes.gif");

By default, a background-image is repeated (tiled) both vertically and horizontally.

When backgrounds become content

Indeed, the role of images of large resolution seems blurred, but the effect won't. See worldwildlife.org (link), but the technologies behind should be applied too (Large Images in Rails). A full-size illustration may make your site cuter (link).

More is to come...

No comments:

Post a Comment