LESSON
06 – IMAGES ON THE WEB
BACKGROUNDS
A website’s
background is an easy way to add colour to a website.
Remember, just because it looks cool,
it doesn’t mean it’s a good idea for a website!
READING
Even more
important than look is the ability to read the website’s content. Therefore, your background should allow users
to still easily read the content.
Research has
shown that black text on a white background is the easiest to read. This is even more true for older adults that
generally have more difficulties to see.
TILING
The
background in a website automatically tiles.
Therefore, if you have a background that is too small, you will see the
image break and start repeating – unless there is a smooth transition. Such a transition simply requires that that
top of the image matches the bottom of the image, or that the left of the image
matches the right of the image.
HORIZONTAL GRADIENT
BACKGROUNDS
Here are a
few ways to easily add colour to the background of a website.
|
TYPE A
horizontal gradient – green to white IMAGE
RESULT Click here |
|
TYPE A
horizontal gradient – same colour, different shade IMAGE
RESULT Click here |
|
TYPE A
horizontal gradient – two different colours IMAGE
RESULT Click here |
|
TYPE A horizontal
gradient – two colours, one in the middle (allows for tiling in both
directions) IMAGE
RESULT Click here |
|
TYPE A
horizontal gradient – two colours, one in the middle (short) IMAGE
RESULT Click here |
|
TYPE A
horizontal gradient – two colours, one in the middle (medium) IMAGE
RESULT Click here |
|
TYPE A
horizontal gradient – two colours, one in the middle (medium) IMAGE
RESULT Click here |
|
TYPE A
horizontal gradient – two colours, one in the middle (uneven gradients) IMAGE
RESULT Click here |
|
TYPE A
horizontal gradient – two colours, one in the middle (super short) IMAGE
RESULT Click here |
|
TYPE A
horizontal gradient – rainbow colours IMAGE
RESULT Click here |
SQUARE BACKGROUNDS
Squares allow
for repetitive content. The size of the
square can greatly affect the look of the pattern. If you line up the angles perfectly, you can
also do 45 degree stripes.
|
TYPE Square IMAGE
RESULT Click here |
|
TYPE Square IMAGE
RESULT Click here |
|
TYPE Square IMAGE
RESULT Click here |
|
TYPE Square IMAGE
RESULT Click here |
|
TYPE Square IMAGE
RESULT Click here |
|
TYPE Square IMAGE
RESULT Click here |
