| The CSS Background property is a popular way to | | | | effects on the page. The simplest example of this is |
| add interesting background images behind text on | | | | the use of a small rectangular image which is |
| web pages, using a URL to the required image. It's | | | | repeated across and down the page. This can create |
| available through CSS support for many 'build your | | | | an attractive repeated pattern. Again, the colors and |
| own' Web2.0 sites such as MySpace and Squidoo. | | | | image need to be chosen carefully to avoid clashing |
| CSS Background images can be used to create | | | | with any text. |
| backdrops to large paragraphs of text, or for small, | | | | Another interesting technique is to use a very narrow |
| repeated images behind links. The CSS Background | | | | slice from an image (possibly only 1 pixel wide) and |
| Repeat property can be used to create fascinating | | | | then repeat this in only one direction. Depending on |
| background patterns and to reduce web page load | | | | the original image, the choice of image slice can have |
| times. | | | | a dramatic effect on the result, which often shows |
| It's important that background images are chosen | | | | fascinating colored stripes across or down the screen. |
| carefully. Images should complement the overlying | | | | An issue with using large image backgrounds is file |
| text, rather than clashing. Here it's wise to consider | | | | size and therefore page load time. The CSS |
| the overall color palette of the web pages and to | | | | Background Repeat property may be used here to |
| ensure that the background fits in with the scheme. | | | | speed up page loads, since a smaller image is used to |
| The size of the original image must be suitable for | | | | fill the same area on the page. |
| the size of the paragraph, link, etc. otherwise an | | | | The CSS Background property is often applied to div |
| unwanted repeat of the image can occur. Currently | | | | sections on a webpage, but can also be applied to |
| there's no way in CSS2 to resize a background | | | | paragraphs and lists. Note that on Squidoo, divs are |
| image. | | | | not supported, so a simple workaround for this is to |
| There are, however, creative reasons for using an | | | | apply the background property to a paragraph. |
| image which is smaller than the area on the webpage. | | | | You'll find some stunning examples by Dr. Richard of |
| When combined with the CSS Background Repeat | | | | the CSS Background Repeat techniques on Squidoo. |
| property it is possible to create interesting tiling | | | | |