Introduction:
When deciding
whether you want to use a plain color or an image you should consider the fact
that very few of the web's 100 most visited sites use background images.
More than 90 percent have a plain white background.
The few pages that actually do use images use very discrete and fast loading images for the purpose.
More than 90 percent have a plain white background.
The few pages that actually do use images use very discrete and fast loading images for the purpose.
When picking the desired color - whether it be plain or an image - you should also consider the fact that some colors work with almost any other color - while there are colors that only work with a limited number of contrasts.
If you use green on a red background, it will look different than if you use the same green on a blue background. Without digging into deep theories about colors, we will make a note on the fact that white, gray and black colors tend to be balanced against other colors. That is, white, gray and black work with any of the colors in the rainbow.
This is probably the reason that white, black and gray are the most widely used background colors found on the net.
If you're designing for a company that has a certain color they use in other graphics, it is very tempting to pick that same color for the background of the webpage. This might be a good idea, but there are other ways to emphasize a certain color than to use it as background for the page.
If, for example, you see a huge white wall with a bright red dot on it, which color makes the biggest impression on you? The 500 square feet of white or the one square foot of red?
The conclusion is, that limited use of colors often makes the appearence of the colors more powerful than if the entire page was one big painting.
Furthermore, when you limit your use of colors, you can use the colors more to underscore the navigation of the page. If secondary navigation elements are held in pale colors while primary elements are sharp - then the user will, by intuition, get the point.
Whether you want to add an image or a plain color as background you need to specify it in the <body> tag.
Backrground color:
Adding a plain
background color to your page is easy.
All you need to do is add a bgcolor property to the body tag:
All you need to do is add a bgcolor property to the body tag:
Example: 1
<body
bgcolor="#FF0000">
Example :2
<body
bgcolor="silver">
<p>This page now has a SILVER
background!</p>
</body>
Result:
|
This page now
has a SILVER background!
|
As you see, the background color (#FF0000) is entered as a
hexadecimal value.
While plain white and plain black are the most widely used colors
on the net, there seems to be a trend moving towards slight variations of
these.
The reason is that the sharp contrast between pure white or black and the text color might be less readable than a slightly faded white/black.
The reason is that the sharp contrast between pure white or black and the text color might be less readable than a slightly faded white/black.
Background image:
If you want to add a background image instead of a plain color
there are some considerations you should make before doing so:
- Is the background image discrete enough to not take away the focus from what's written on it?
- Will the background image work with the text colors and link colors I set up for the page?
- Will the background image work with the other images I want to put on the page?
- How long will the
page take to load my background
image? Is it simply too big? - Will the background
image work when it is copied to fill the entire page? In all screen
resolutions?
After answering these questions, if you still want to add the background image you will need to specify in the <body> tag which image should be used for the background. <body background=" nextit.gif">
Note:
If the image you're using is smaller than the screen, the image will be replicated until it fills the entire screen.
If, say you wanted a striped background for your page, you wouldn't have to make a huge image for it. Basically you could just make an image that is two pixels high and one pixel wide. When inserted on the page the two dots will be copied to fill the page - thus making what looks like a full screen striped image.
When you choose to use a background image for the page it is always a good idea to specify a background color as well.
If the image you're using is smaller than the screen, the image will be replicated until it fills the entire screen.
If, say you wanted a striped background for your page, you wouldn't have to make a huge image for it. Basically you could just make an image that is two pixels high and one pixel wide. When inserted on the page the two dots will be copied to fill the page - thus making what looks like a full screen striped image.
When you choose to use a background image for the page it is always a good idea to specify a background color as well.
<body
background="nextit.gif" bgcolor="#333333">
The reason is that until the background image is loaded, the background color will be shown.
If there is too much difference between the background color and the background image, it will look disturbing once the browser shifts from the background color to the image.
Therefore it is a good idea to specify a background color that matches the colors of the image as close as possible.
You may have noticed that background images scroll with the page when you use the scroll bar.
The last page in this section will teach you how to add a fixed image to your page.....
Fixed image:
The background image
will scroll when the user scrolls down the page, unless you have set it to be
fixed:
<body background=" nextit.gif"
bgproperties="fixed">
By adding the bgproperties="fixed" you force the browser to let the background be fixed even if the
user is scrolling down the page.
Note: Fixed backgrounds are only supported by MSIE and do not work in
Note: Fixed backgrounds are only supported by MSIE and do not work in
Netscape browsers - instead they simply act as normal backgrounds.
As mentioned earlier in this section a limited use of colors can add more power to the few colors that are used.
The most important tool for adding colors to certain areas of the page rather than the entire background is tables.
As mentioned earlier in this section a limited use of colors can add more power to the few colors that are used.
The most important tool for adding colors to certain areas of the page rather than the entire background is tables.
Patterned & Transparent Backgrounds:
You
might have seen many pattern or transparent backgrounds on various websites.
This simply can be achieved by using patterend image or transparent image in
the background.
It is
suggested that when creating patterns or transparent gifs, use the smallest
dimensions possible even as small as 1x1 if you can. Larger files load slow and
inhibit the load time of your sites.
Here
are the examples to set background pattern of a table.
<!-- How to set a table background using pattrern -->
<table
background="/images/pattern1.gif" width="100%" height="100">
<tr><td>
This
background is filled up with a pattern image.
</td></tr>
</table>
<!--
Another example on table background using pattrern -->
<table
background="/images/pattern2.gif" width="100%" height="100">
<tr><td>
This
background is filled up with a pattern image.
</td></tr>
</table>
This will produce following result:
|
Html –web colors:
Our
example uses the text value, which is one of three different types of color
values that can be used with the bgcolor attribute. Below is a table of the 16
basic HTML color values that are available to HTML web designers.
HTML Basic Colors:
|
|
Black
|
|
Gray
|
|
Silver
|
|
White
|
|
|
Yellow
|
|
Lime
|
|
Aqua
|
|
Fuchsia
|
|
|
Red
|
|
Green
|
|
Blue
|
|
Purple
|
|
|
Maroon
|
|
Olive
|
|
Navy
|
|
Teal
|
While
the table above illustrates only 16 colors, 16 is surely not the limit to our
color wheel. As we mentioned, HTML supports three different types of color
values including text values (which we've pretty much covered
above), numeric, (RGB) and hexadecimal values. We'll go
into more detail regarding these values so just sit tight. This next example
offers a sneak peak at what these values may look like.
HTML Code:
<table
bgcolor="#ff0000" border="1"><tr>
<td>A
red colored table background using hexadecimal values
"#FF0000".</td>
</tr></table>
<table
bgcolor="rgb(0, 0, 255)" border="1"><tr>
<td>A
blue colored table background using numeric, RGB values "rgb(0, 0,
255)".</td>
</tr></table>
<table
bgcolor="lime" border="1"><tr>
<td>A
lime colored table background using color names.</td>
</tr></table>
Table Bgcolor Values:
|
A lime colored table background using color names.
|
|
A red colored table background using hexadecimal values
"#FF0000".
|
|
A blue colored table background using numeric, RGB values
"rgb(0, 0, 255)".
|
Hexadecimal and numeric color values (RGB) allow HTML
developers to expand the color wheel beyond 16 colors. Way beyond 16, in fact.
Nonetheless, there's no need to memorize 256+ unique color combinations;
instead, we can use numeric and hexadecimal values and calculate color shades.
Html coloring fonts, table rows, & table columns:
Here's
a few common examples of bgcolor in action.
HTML Bgcolor Code:
<table>
<tr
bgcolor="#FFFF00"><td>This Row is
Yellow!</td></tr>
<tr
bgcolor="#AAAAAA"><td>This Row is
Gray!</td></tr>
<tr
bgcolor="#FFFF00"><td>This Row is
Yellow!</td></tr>
<tr
bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>
<tr
bgcolor="#FFFF00"><td>This Row is
Yellow!</td></tr>
<tr
bgcolor="#AAAAAA"><td>This Row is
Gray!</td></tr>
</table>
Alternating Table Row Colors:
|
This Row is Yellow!
|
|
This Row is Gray!
|
|
This Row is Yellow!
|
|
This Row is Gray!
|
|
This Row is Yellow!
|
|
This Row is Gray!
|
Check
out this "Scoreboard" we made with the use of font color and bgcolor!
HTML Code:
<table
bgcolor="#000000">
<tr><td bgcolor="#009900"
align="right">
<font color="#FFFF00">Green Bay</font></td>
<td><font
color="#FFFFFF">13</font></td></tr>
<tr><td bgcolor="#0000FF"
align="right">
<font color="#DDDDDD" >New England</font></td>
<td><font
color="#FFFFFF">27</font></td>
</tr>
</table>
Scoreboard:
|
Green Bay
|
13
|
|
New England
|
27
|
Html background repeat:
In
the first example, we specified predetermined height and width attributes that matched the dimensions
of the image we used in the background of the table element. Everything looks
great. But we will run into problems if we add more content to the table itself
and this element's height increases in size. The image begins to repeat itself
to fill in the extended regions, which may look awful.
HTML Repeating Background Image:
<table
height="200" width="150"
background="http://www.tizag.com/pics/htmlT/background.jpg"
>
<tr><td>This
table has a background image</td></tr>
</table>
Repeating Background
|
This table has a background image
|
More
often than not, this behavior causes more pain than pleasure, and as web
designers, we have two options. We can either live with it (until learning how
to squelch it with CSS code) or, use this behavior to our advantage by thinking
outside the box.
Html background repeat revisited:
Now
that we are more familiar with transparent HTML backgrounds, we can take our
previous example a step further and create a very nice effect called a gradient
overlay. To do this, we're going to take advantage of the repeating behavior of
HTML background images and create a transparent gradient image file that is the
same width as the target image (480 pixels), but only 1 pixel tall.
Gradient Overlay Code:
<table
height="163" width="480"
background="http://www.tizag.com/files/html/htmltransparentbackground.png"
cellspacing="0" cellpadding="0">
<tr>
<td>
<table
height="163"width="480" background="http://www.tizag.com/files/html/htmltransparentgradient.png">
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
Gradient Overlay Example:
|
The
gradient image we have provided is 480 pixels wide and only 1 pixel tall. We've
done this for two reasons. Although the image is only 1 pixel tall, the web
browser continues to repeat this image indefinitely, or for the entire height
specified using the height attribute (163 pixels in this case).
Additionally, reducing the size of the image to 1 pixel in height drastically
reduces the file size and will tremendously improve page performance.
No comments:
Post a Comment