CSS background colour and images

rgb hex colour chartBackground images can be used throughout a website for aesthetic reasons and thus provide a much richer experience for the user. There is a pitfall that can occur if the user has images turned off. The reason for this is because you may have a dark background image and a white coloured font. If the user has images turned off, the dark background image will not be shown and a default white coloured background will be shown instead. Therefore the background colour and font colour will be white. Below is an example of an element with just a background image set.

div.holder { background-image: url(images/template/bg_darkgreybasic.gif); }

We should always set a background colour with our background images to prevent contrasting issues that occur if a user has images turned off. Below is an example of a background image and a background colour set.

div.holder { background: #333333 url(images/template/bg_darkgreybasic.gif); }

Very few users actually have images turned off, but for the few, a contrasting issue such as the above, may result in your website being unusable. Adding background colours to background images in your CSS files should become a habit once you do it a few times. This is a technique that your boss and clients will not see and may not care about, but as a professional web developer, we're sure you will.