Using A CSS Background
This tutorial shows you how to use a CSS background or
background image for your web page. It's part of a complete template
tutorial on how to create
an HTML CSS
template for your website.
I'm using KompoZer for this tutorial, which is a free web site editor.
Using Backgrounds
Having
text in a light colored table with a different
colored background either side can make your web page look a lot nicer
than having the entire screen one color.
You can use a solid color as the background like this page, or you can
use the CSS background image command to use an image that
gives a bit of
texture to the background to stop it looking bland. This is a small
image that repeats itself right across the page. You can find free
seamless background images on the internet, or make your own.
You
can also use a large image as the background, like having your page set
in
the middle of a picture. The picture can be fixed, it or can scroll
with the page. You can change the opacity of the table your text is in
so that the picture shows through faintly.
It sounds great, but there are downsides that you should know about.
Problems With Background Images
I
don't see much wrong with the idea of a smallish tiled background image
to give the background a bit of texture instead of having a solid
color.
Putting a large picture as the background has a number of problems
though.
It can be overpowering and distracting and take away from the message
you're trying to get across.
The page
can slower to load because the picture will probably have a large file
size.
If
you have the background image showing through the text even faintly, it
can make
the text harder to read for a lot of people. Have pity on your readers
with less than perfect eyesight.
It will show up differently in
different browsers and on different computers. It may look great on
your computer, and not so good on someone else's. Particularly, if you
have the picture showing through the text it may be faint and readable
on your
setup, but the image may be darker and the text harder to read on a
different computer and browser.
The picture will show
differently for different sized monitors and resolutions. It may be a
single picture in some cases and tiled in others.
Personally, I wouldn't use a large picture as a background. If you do
use one,
check it out on as many browsers, computers, and screen resolutions as
you can.
Setting a CSS Background
To set a CSS background fire up KompoZer and open your web page. Click
on Tools
in the top
menubar, then CSS editor.
If you have Body
listed in the left pane click on it, otherwise click on the palette
icon at the far left of the top menubar, then in the right pane you
should see New Style
Rule with a number of options. Select Style applied to all elements of
type, then click the button at the right of the empty
text box below. Select Body.
Then click Create Style Rule.
Body will appear in the list in the left pane.
To set a plain background color click on Background in the
top menubar then click in the little box to the right of the empty Color text box. A
color chart will appear and you can choose whatever color you think is
appropriate.
Setting
the background color for about-armidale. I'm going for a light colored
background for this.
It doesn't matter how dark it is because the main table will have a
light color for readability.
Setting A CSS Background Image
To use a CSS background image follow the steps above except instead of
choosing a color click on Choose
File to the
right of the Image
text box.
You should have already have an image that you want to use for the
background image.
Browse
to the image and select it and you should see it appear on your page
immediately. Then choose the options you want, how it's tiled, whether
or not it scrolls with the page, and its position on the page.
Whether
you're using one large picture or a smaller tiled image, you'll
probably find it takes a bit of work to get it looking as nice as you'd
like.
Setting The Table Background
When you use a color or image as a page background, you'll need to set
a background color on your HTML table as well. Otherwise, your table
will be the same color as the page background.
If you have the td
style rule in the left pane of the CSS editor select that. If you
don't, click on the palette icon in the top menu bar, select custom
style rule, type "td" (without the quote marks) in the text box and
click on Create style
rule. td
will appear in the left pane.
Then it's just like setting the page background color. Select the background tab,
then click in the little box to the right of the empty Color text box. A
color chart will appear and you can choose whatever color you think is
appropriate.
Remember
that dark text on a light background is best for readability. I'm just
using white on this page, but any light color would work.
What's Best?
A background color is quick, easy and suits
most sites. A textured background using a small tiled image
can
look more upmarket, but it will take more work. A large CSS background
image
can take a lot more work, have problems with a large file
size, and may
not make any difference to the bottom line, though it may suit some
types of website.
If you're time challenged
I'd suggest you just use a solid background color, so you have more
time to write the actual content.
Next Page:
Setting table
styles with CSS
Return
from Setting A CSS
Background to the Website
Template Tutorial Overview
|
