Guides:
Home
Basics
Backgrounds
Colors
Fonts
Tables
Frames
Links
Images
Forms
Buttons
Lists
Misc.
Cheat Sheet
Test Pad
Other Help Sites
HTML Software
Graphic Software
|
Backgrounds
For backgrounds you can either have a color or an image. When choosing a background you want to make sure there is enough contrast between the background
and the text that appears on the page. Good contrast will make it easiers for readers with eye sight problems to read.
Good Contrast:
| There is enough contrast here that you can easily read what I have written without straining your eyes. |
Bad Contrast:
| There is NOT enough contrast here so, you eyes end up straining to try and read the words. |
Okay now that you understand how the contrast works then lets move on to the coding for a background using a color. Remember earlier when we talked about the Body tag ( <body> ) well this is
where you want to put the background code. To make a back ground color simply put bg="Color" now the color can be a name of a color though I don't recomend that because different browsers interpurt this differently
some times. It is better to use a non dithering color code. This is explained in more detail and color codes are given on the Colors Page
For example the background code for this page is <body bgcolor="#CCFFFF">
Now the code for a background image is slightly different. Instead of bgcolor you will put background="URL" inside the body tag. So it will look like this, <body background="URL"> you place the URL or the location of the image you want
as the background where the URL is in my code example. Once you replace it yours should look something like this,
<body background="http://www.example.com/bgexp.jpg">
The same rule of contrast applies to an imaged background. You want to always make sure that your text and information is easily seen and readable. You also want to be careful of too much distraction with your background if you have what designers call a "busy background" then the
reader becomes distracted by the background and is unable to focus on your information and thus will most likely go some place else where they can easily concentrate on reading and gathering the information they seek. Another wary background choice is the animated background.
It is used just like the imaged background as the animation is an image but you want to be careful that the animation is not to distracting or hard on the eyes. A fast flashy animated background would not be a good choice. Allow me to show you some examples of good background images and bad ones.
Good Non Animated Background
| This is a good background because it is light, the text is easy to read, and there is enough contrast that it will not be hard one the readers' eyes. |
Bad Non Animated Background
| This is not a good background because the text becomes hard to read. This is due to the fact that there are two major color differences in the background and there is not enough contrast between both colors used in the image and the text on the page. |
Good Animated Background
| This animation is not so busy and flashy that it distracts. It is what I like to call a calm animation which is easy on the eye and allows for the designer to get the need contrast between the background colors and the text color. |
Bad Animated Background
| This animation is not a good one because it is too busy and distracting and the contrast is harder to get. |
Now that you see the differences and have learned what makes good backgrounds and why you should stay away from some backgrounds try adding one into your site.
|
