Tip #1812 - Web Design Workshop: Break Your Design 2—Background Tile
Printer Friendly Version | E-Mail This Tip
Previously we
talked about breaking your website design into smaller pieces so it can
be reassembled into your web page building program. Let's talk about backgrounds
today.
My design had
a simple white background, which is easy to work with. You just set the
background color to white in your web page building program and that's
it. But what do you do if you have a colored background element in your
design? Well – you tile it.
Tiling a background
allows you to assign a very small piece of the background in your web
design program and the program will tile that small piece. That means
it will place that small graphic next to itself over and over to cover
the entire background area. This is a great way to incorporate a background
into your design because, since the same small background image is used
over and over, the file size for that image is only counted once when
the page loads. In other words that graphic may be used 100 times to make
up your background image but since it is really only one image, just repeated,
it only has to load once.
Check the help
file or tutorial of the particular web page building software you are
using for "background image" instructions to learn how to assign
the background.
I added a background
to my design so I can show you what I mean.
click
for larger image
I'm just going
to grab a sliver of that background and then let the web page building
program tile it.
click
for larger image
Here is the
sliver I grabbed
click
for larger image
This sliver of the background is 3 pixels wide and 592 pixels high. The
web page building program is going to keep placing it next to itself in
order to create the whole background image.
click for larger
image
Keep in mind
that the background image is going to be tiled vertically and horizontally
(side by side and top to bottom). So, if I just use my background sliver
that is 592 pixels high, then when a person viewing my site has their
browser open to let's say 700 pixels then the background is going to repeat
itself. This could cause design problems if a person is scrolling down
to read text and then the background design is showing up in places that
you don't want it to.
Click
here for an example.
As long as you
are aware of what your background is going to do then you can make necessary
adjustments. You could make adjustments to your text, like
I did here by putting a white background in my text table, or you
may need to mess around with your background in order to get it to repeat
the way you want it to. A little trial and error is part of the learning
process of putting a web site together.
Want To Comment On This Tip? Click Here! We'd love to hear from you :-)
Like These Tips? Get 'Em Free In Your E-mail
