For this tutorial, we will
study the use of web site backgrounds. Even HTML
code beginners can design using them with a little
coaxing. Backgrounds for websites can enhance sites
and make them look more appealing to the viewer.
Without a background image or a specified solid
background color, the page will default to white in
the browser. Professional web designers understand
that backgrounds give sites a unique look and feel.
Backgrounds complement the site's logo and if used
properly, can help get visitors into a buying
mood.
If you're new to the world of
web
design or are getting
ready to design a site, we've put together five
tips about backgrounds for websites to help you
understand what they are and how they
work.
1. Always Choose a Solid
Background Color
Even if you select a
background image for your site, it's good to use a
solid background color behind the image. This color
will load in default instead of white in the event
that your background image takes a while to load,
and also if your visitor arrives with his/her
"images" turned off while surfing the web.
This method caters to viewers
that are still using a slow Internet connection and
that have turned off their computer's image
features to increase surfing time. Choose a page
background color that closely matches the
background image or that blends well with your
site's colors.
2. Background Image and
Logos
Background images are
separate from your design (tables, css formatting,
etc.) but should still blend well with your page's
main features. Make sure the background image
doesn't make your text difficult to read and that
it doesn't cause the page to seem too "busy" for
the reader. Backgrounds for websites shouldn't be a
distraction to your viewers, but should help
promote the overall goals of the site.
Below is a video I found for
how to create and install a background image using
Photoshop and Dreamweaver ..
3. Check for Repeating
Patterns
Background images are often
designed in repeating patterns that are meant to
cover a certain length of the page. If your web
pages will be fairly long, making the viewers
scroll far down the page to read the whole copy,
then be sure to use a seamless background image.
Otherwise, the page will show
an ugly seam horizontally every time the image
repeats on the page. Another solution is to
permanently fix the background image in place, so
that it remains stationary while text and other
images on the page move while scrolling. Look for
tutorials on the Web that teach you how to do
this.
4. Use Only Solid Colors
for Text Areas
With the exception of your
logo, make sure the areas of the background image
where your site copy will be typed is a solid color
or at least light-colored patterns.
The color should be either
light or dark so the text can easily be read. Avoid
using not-so-common colors for text... stick with
traditional black or white (for very dark
backgrounds). Reserve blue, green, red, etc. for
headings, emphasis in your copy, and/or text
links.
5. Backgrounds for
Websites Can Easily Be Created with Simple HTML
Code
For a background color, it's
just a matter of entering a code for the color in
the HTML code of your page. For a background image,
you'll need to create an image with a graphics
program (if available), or use a free or purchased
background image.
The image will need to be
loaded to your server via ftp, preferably in a
special "images" folder. Then, insert a link to the
image within your background image code. The
special background image code tells your server
that the image is to be used as a background image,
and not as a regular image.
Looking Professional in
Web Design
A background image is a
cost-effective design feature to create a
professional look for your website. And if you know
just the basics
of HTML or CSS web
design, you can easily create a page with a great
background. Look for Internet sites that offer cool
free background images or special tools to create
your own.
If you don't know the first
thing about design, then outsource your background
image project to a professional designer.
Backgrounds for websites can spruce up a page in no
time!
