TOPIC - CREATING TILING BACKGROUND

 

separator-blank.png

 

BACKGROUNDS

 

A website’s background is an easy way to add colour to a website.

 

READING

 

Even more important than a website’s 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 an HTML document 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.

 

ADVANTAGES OF TILING

 

  • Low bandwidth usage
  • Small image to create
  • Easy way to add colour

 

DISADVANTAGES OF TILING

 

  • Can look repetitive
  • Can seem unprofessional

 

HORIZONTAL GRADIENT BACKGROUNDS

 

Here are different horizontal backgrounds.  While the image seems simple, the resulting background is quite interesting.

 

 

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

 

 

 

 

VERTICAL GRADIENT BACKGROUNDS

 

We can also use vertical images for backgrounds.  There is one challenge however.  If your page is too long, you will see the bottom of the image.  The solution is to create a background that tiles both horizontally and vertically.

 

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

 



separator-blank.png