 |
|
Using A CSS Background
This tutorial shows you how to use CSS for a background or
background image for your web page.
It's part of a complete free tutorial on how to create an HTML CSS
template for your website.
Previous pages of the tutorial are:
I'm using KompoZer for this tutorial, which is a free web site editor.
Using Backgrounds
Having
text in a light colored table (for readability) 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 the background image command in CSS to use an image that
gives a bit of
texture to the background to stop it looking bland.
You
can also use an 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.
The Downside Of 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
like the blue on this page.
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 picture will probably have a large file size, making the page
slower to load.
If
you have it 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 elses. 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.
I would only use
a picture as a background in special circumstances. If you do use one,
check it out on as many browsers and computers 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 should 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.
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.
Use Your Time Wisely
If you're time challenged
you need to keep focused on what's most important, and that's the
actual content on your site. That's what your visitors are most
concerned with.
A background color is quick, easy and suits
most sites while using a CSS background image can take a lot more work
and may
not make any difference to the bottom line. So use
your judgment
as to the best use of your time.
Return
from Setting A CSS
Background to Creating
A Website Template
|
|