Why I don’t like to use background images on websites
I have a client who insisted on keeping the background images that were on their website. We did it because we will give the clients what they want. However, we did advise against it for a number of reasons
- Background images make readability tough even when they are really washed out. You need to go at least one or two points larger with the font and you usually need to bold the font because of the noise of the background
- Having a background image tends to limit the amount of text you can put on a page.
- There is always a possiblity that the search engines will hit you with a spam penalty if they think the text and background are too close.
Well, now, we need to add a lot of text to one of the pages. We can’t reduce the font size because the picture will obscure the text. We did go with a scrolling background image which worked to a point. The client then mentioned that they didn’t like the change we made to the background color. We hadn’t changed the color. What is happening is a sort of optical illusion. When you deal with background images, you have a lot of visual interaction going on.
- Background color
- Text color
- Positioning of the text
- Weight of the text (font size and bold)
- Background image colors and shade
- Placement of the background image relative to the text
- Color of the foreground image.
- Any ‘skins’ on the browser’
- Windows color setting which carry to the browser.
Someone who is an artist or who has artistical training would probably have a lot better intuitive grasp of the consequences of changing any one of these variables than I would have.
If you want to get an idea of how the brain interprets what the eye sees, take a look at an example of the checkerboard illusion. That shows just how complex things are and why I like to stick with a solid backround and solid text.
- Modifying your Blogger template with CSS.
- Changing the attributes of printed pages via CSS
- Setting browser caching
- Rails – Changing the attributes of the flash notice
- JCE Editor – Fixing readability caused by a background image in the editor
- Changing your background photo in linked in. Fix for correct your fields
- Responsive Headline and Slogan in WordPress with an Artisteer Template
- Fixing the “Leverage browser caching” and “Enable Compression” from Google Page Speed in Joomla