Ungerboeck Digital - Blog

Blog

 

50 Shades of #CCCCCC: A Primer on Website Background Image Techniques

Kevin Zink
Dec 04, 2015
website background image techniques

 

Does your website look a little like rice on a paper plate in a snowstorm? It’s time to introduce some color! One straightforward place to start is to experiment with a new website background image. Not “old-school” tiled, blinking gif backgrounds, but nice gradients that enhance the page as a whole and allow your foreground content to pop.

So, what's the best method? Static images? CSS3 gradients? Vector graphics? Let’s do a quick comparison.

Static Images

Static images simply work. Regardless of the browser, platform, or operating system, a static image will do what you ask it to do. Modern browsers can shift to starting point, stretch or constrain proportions, and repeat or fix a single instance. The main drawback to this method is that you are adding an additional request during the loading of the page, increasing the weight, and therefore the load time, of the page, creating the need to manipulate the image with an editor each time an adjustment is required. This is the only method, however, that gives you complete freedom as to what the background contains. From a visual standpoint, it should look completely consistent regardless of the viewer’s device or browser.

CSS3 Gradients

Any developer worth his salt is already a big fan of gradient background… or is at least on his or her way. CSS gradients strive to be fantastic. A few lines of code will allow the developer to create rich gradients spanning every color of the rainbow. Striping, linear and radial patterns, defined angles, stop points, and lens flairs that even J.J. Abrams would be proud of are all possible. These gradients can be changed through a simple text editor and fall in line within standard CSS files. The only issue is that browsers have differing support and code requirements.

This means that what should be a simple line or two of code becomes a bloated set of instructions required to work with all web browser rendering engines.

A simple rendering will look something like:

background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff00ff), to(#003399));
background-image: -webkit-linear-gradient(top, #ff00ff, #003399);
background-image: -moz-linear-gradient(top, #ff00ff, #003399);
background-image:  -ms-linear-gradient(top, #ff00ff, #003399);
background-image:  -o-linear-gradient(top, #ff00ff, #003399);

The above isn’t too bad, as each line is fairly similar.  A more complex rendering, however, might look something like this:

background: -moz-linear-gradient(top,  rgba(30,87,153,0) 0%, rgba(30,87,153,0.8) 15%, rgba(30,87,153,1) 19%, rgba(30,87,153,1) 20%, rgba(41,137,216,1) 50%, rgba(30,87,153,1) 80%, rgba(30,87,153,1) 81%, rgba(30,87,153,0.8) 85%, rgba(30,87,153,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,0)), color-stop(15%,rgba(30,87,153,0.8)), color-stop(19%,rgba(30,87,153,1)), color-stop(20%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(80%,rgba(30,87,153,1)), color-stop(81%,rgba(30,87,153,1)), color-stop(85%,rgba(30,87,153,0.8)), color-stop(100%,rgba(30,87,153,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 15%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 85%,rgba(30,87,153,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 15%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 85%,rgba(30,87,153,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 15%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 85%,rgba(30,87,153,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 15%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 85%,rgba(30,87,153,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#001e5799',GradientType=0 ); /* IE6-9 */

Not so pretty.

Vector Graphics

Vector graphics also come into the mix by allowing a hybrid of the previous approaches. A vector graphic is often in the .svg format and is created as a lightweight file by hand or using any number of editors (both online and installed). Using a vector graphic allows much more design flexibility than a CS3 gradient but will not rival a photo-realistic image. Technically, it’s possible to convert a JPG or PNG into an SVG file, but because vector files provide drawing instructions rather than a limited number of colored pixels, an SVG with the same image fidelity as a JPG will likely crash your computer, not to mention your browser. As with standard background images, this file is then referenced by the style sheet, which still requires an additional request to the server. They can, however, be edited directly and the code required for a vector graphic will render the same within most recent browsers.

The answer to your website background image woes?

Unfortunately there is not a single answer. Static images are comparatively heavy, must be managed outside of the system, and require an additional server request. They, however, work exactly as intended and allow for exact visual control. CSS3 gradients work great for something simple but become exponentially complex as the patterns become more complicated. These gradients can be very limited in what they can render, but more effects will undoubtedly be developed as CSS evolves. A vector graphic takes a middle of the road approach by working with semi-complex designs but still requires an additional server request and isn’t as well supported in older browsers.

Each background image technique must be weighed against the pros and cons of each approach. We will all have to continue to look to the future in the hopes that standard syntax will one day make page fills a simple background task: beautiful to the designer, straightforward for the coder, and lightweight to the server.

Let's Talk

Looking to know more? Drop us a note through the form below.

636.300.5606  |  100 Ungerboeck Park, O'Fallon, Missouri, 63368
Godzilla