CSS2 Website Design Techniques


The CSS Background property is website designer way to add great images in the background, behind the text, on website pages, using a URL to the required image. This is possible through CSS support for many 'build your own' sites like MySpace and Squidoo. CSS Background images are useful in creating backdrops to big textual paragraphs, or for small and repeated images behind the links. The CSS repeat of background property is used to create amazing patterns of background and to reduce loading time of a web page.

 

It's very important that these background images are chosen by a website designer carefully. Images should complement the text which is overlapping, instead of clashing. It is advisable to consider the overall color palette of the web pages and to ensure that the background fits in with the scheme.

 

The original image size should suit the size of paragraph, link, etc. or else an unnecessary repeat of the image can take place. At present there's no technique in CSS2 for resizing the background image.

 

There are reasons however, from creative point of view for using an image that is smaller than the web page area. With combination of CSS Repeat property you can create tiling effects on the page that looks interesting . The simple example; using a small rectangular image that is repeated down and across the page. This create an appealing repeated pattern. Again, the image and colors should be carefully selected to avoid clashing with any content or text.

 

Yet another good technique is to use a narrow slice from an image (about one pixel wide) and then repeat it in one direction only. Based on the original image, the selection of image slice can show a dramatic effect on the result, which displays fascinating stripes of colors down or across the screen.

 

One problem with using large image backgrounds is the size of the file and therefore page load time. The Background Repeat property of CSS can be used for faster page loads, since a small image is used to fill the page area.

 

The CSS Background property is applied by website designer for webpage section divisions, but is applicable to lists and paragraphs. It is noteworthy that on Squidoo, divs are not supported, hence a simple workaround for this is to apply the background property to a paragraph. For more details on CSS2 compatible sites.