Backgrounds and effects

An image or a colour background be one of the most distinguishing elements of a web page. And it is very easy to add this feature in any web publishing program. It used to be specified in the markup within the <BODY> tag (with a visual editor you don’t need to look for this particular tag, just choose the option “background image” for your page, and then choose the colour or the image file you want to use, in the usual format GIF, JPEG or PNG formats. This was the only way of having a background image in the first years of the web, but now you have more options and flexibility with CSS, adding the necessary properties (background color, background image, and their position and repetition) to any element of the page.

If the selected image is smaller than the screen size, in HTML it was tiled with as many horizontal and vertical repetitions as necessary. With CSS styling there are many more options: it may be repeated only vertically, only horizontally or both, and it can be attached to any part of the containing box. This allows, for example, that the image background stays in place (say in the top left corner) even if its box is resized to a bigger or a smaller size. Note that if you use an image with a transparent colour, the background will show through; you can use this to include interesting visual effects in your design. Remember that using CSS you can apply backgrounds selectively not only to the whole page or to one or more cells of a table (the only places to use backgrounds in the old way), but also to selected paragraphs, sections of the page or whatever part you want, to create more interesting effects. For example, you could use a notebook-like grid, a natural texture... in this particular case you have a paragraph (this one) placed in a notebook containing DIV. If it is enlarged, the background image will tile up to cover the new areas.

Years ago, there was a tendency to use very small images for the backgrounds, trying to download them faster. In fact, you can use a bigger image if necessary, because if the image is formed by flat colours and you optimize it well, its file size can be almost unnaffected. With this in mind, it is possible to create a special image which doesn’t get tiled (horizontally or/nor vertically), to create very showy and original effects.

Examples of textures, created in the freeware utility Reptile.

Which graphics must we use?

You can follow the basic principle you must already know (if not, refresh your knowledge of web graphics) of using simple GIF or PNG-8 format files for images with flat colours and relatively simple shapes, and keep the JPEG for photographic images or with more complex gradations of color, and for textures (you can use PNG-24 as well.) We must have caution with those textured backgrounds, because they can make reading more difficult: avoid garish combinations! A background with these characteristics should’t be placed under long text blocks; this is one of the most evident signs of incompetence in web page design. For long texts, the recommendation is something very close to black text on white bottom (or at least with an equivalent contrast level.)

Although now it’s no longer a vital issue to restrict the background colours to the so called websafe palette, it’s still is a good idea to pick a colour from this set of 216, because it assures an absolutely flat background colour, and clearly readable letters, even if the visitor has some really old equipment with a graphical card which is able to show only 256 colours. This restriction isn’t as big as it might seem: true, this is only one very small part of the possible colours in one more modern machine, but even so it is a very good colour range. Let us imagine for a moment that we’re talking about colour pencils or markers, watercolours or acrylic paint tubes. Have you ever seen a box with so many different colours? Actually, 256 is a lot of colours to choose!

Some ideas to use background colours

Some of these ideas are used (and sometimes overused) elsewhere... we must think new possibilities and of experiment! When using images for parts of the page or for the whole page it’s important to plan the positioning of the elements well; avoid having text over sections of the page where it isn’t supposed to be because it can dissapear visually or be almost impossible to read.

A subtle animation (would have to be very compact and simple, and only in sections with little or no text.
A grid, lines... like a notebook.
An image with a margin that simulates a notebook, a file card...
Logo of the company, institution or product.
A strip of color or with different shapes, in vertical or horizontal.
A smooth texture of paper or natural materials (wood, rock, cork, fabrics...)

How to get or create background images.

Many programs include generous collections of textures, ready to use, in standard format GIF or JPG, or in other formats you can easily convert or export. We can also find tools to create patterns or fills that use different models of textures to fill an object of any size and shape. Thus we will be able to create the buttons, backgrounds and other elements of the page, in any way we could possibly imagine. On the other hand, you can obtain free elements in different Internet websites. There are many archives of this kind; you can simply do a Google search on “background images”.

There are different ways to generate seamless patterns and textures, which tile perfectly. We can even create them manually if necessary using any paint or draw program, remembering that:

The shapes in the bottom part of a module with those in the upper part of the next one;
the shapes on the right end must continue with those of the left end of the neighbouring piece. Let us see some example in the attached illustrations:

Vector drawing programs can create certain types of textures very well (with geometric forms, especially), because the elements can be manipulated accurately with complete freedom. With Fireworks, in addition, a you can create patterns in vector mode, but you can apply sophisticated textures with the brushes, and obtain a realistic image that doesn’t look like made in a drawing program. Another useful ingredient to create these simple, geometric textures, are dingbats or pictorial typefaces. Simply start your drawing program, or your painting application and choose the suitable symbol, then save as GIF, PNG or JPG. If we want to alternate colours, we only must increase the number of used characters of dingbat and apply colour each one, and later save the image that includes several characters (as we show in the image.) Many existing dingbats that are good for this use; again, this material can be downloaded for free in sites like Typoasis. If we want a more realistic texture, in the style a painting program, also shown here, you can apply different filters to an image created in a drawing program, or directly in the paint application. A very peculiar utility, Reptile, of Sausage Software (freeware), lets you automatically generate an infinity of images and animations, which you may use like backgrounds. The program is very amusing: from a series of parameters, it operates to create these images, with surprising results. The textures shown here have been created in this programa. Then there is a large number of plugin filters for Photoshop and compatible applications that you can use to generate patterns and texturs..

Some tips

If we want an effect similar to a notebook, with a left margin that simulates the spiral binding, perforations... with HTML only the essential trick is to use a sufficiently wide image so that, even to the maximum resolution that some users use, the background image is not repeated horizontally. This means quite big dimensions: about 1050 pixels wide, for example, by some tens of pixels tall. If we fear we end up with excessive size file, we must take care of the image optimization (you see the article on this subject.) If you use CSS, as we already mentioned, you have more flexibility and you can get away with smaller images, because you can attach them to make sure they stay in place when the containing element gets resized.

To make sure the elements of the page are placed correctly, a certain, constant distance from the top left margin, over the background we can do it of two ways:

Position defined with text layers and images (layers, the DIV element in the markup), whose characteristics are specified using style sheets; basically, containers for the objects of the page are created and placed in the screen with pixel-level control.
The old, deprecated way, involved tables, using absolute sizes to control the width (to make sure, sometimes empty columns were used to push the rest of the contents to the desired position, and transparent GIF were the usual spacing blocks). These workarounds are unnecessary and they badly bloat the code. You’d better use more logical markup; keep in mind that visual editors often create all this junk code to place the elements in the desired positions when you design a page in WYSIWYG mode.

Be careful here with a detail: browsers, by default leave a gutter in the top and left borders of the screen. To complicate things further, this margin is different in Explorer and Netscape, and so on. So, to get that page perfectly in the position you wish, with no empty spaces, you can indicate it in the CSS, or if you use only theHTML, add leftmargin=0 topmargin=0 marginheight="0 "marginwidth="0" within the BODY tag of the page.

Of course, the freedom to experience with these images and background colours will be bigger in short pages, with contents that fit in a single screen, since there will be no expected problems with tiling and position.

In many of the pages of this manual we use different background colours. Many designers use backgrounds a lot in their CSS-based websites, especially for images that have only a representational, decorative function, and no illustrative or content-related meaning. For other image uses, a IMG tag using an alternate description is mandatory, but for simple decorative elements which add nothing to the content, only improve the visual appearance, specifying a background image is the way to go.