Latest News

Adding an image as a background for your website can really make a difference to the look and feel of the site and is an easy way to make the site feel bigger without putting too much strain on bandwidth. Adding an image is easy – just go the details section when configuring your site, but what sort of image should you use? Read on to find out…

USING A SINGLE IMAGE
If you want a single photograph as a background, it should be a minimum size of 1600 pixels wide by 1200 pixels high. This will account for most screen resolution settings. The image will be repeated if the screen resolution is large than the image which will look rather strange.  You should also bear in mind that the website will cover the central part of the photograph so you may find you need to crop the image carefully to ensure the image works well.  See the screen shots below for examples.

MAKING A DROP SHADOW BACKGROUND
A drop shadow is an effective way of throwing the site out of the browser window, as it appears to float over the background.
To add this to your website you will need to create a full size image as outlined above.  To get the shadow the right size and in the right place, follow these steps:
1. view your site in a browser as it is and take a screen grab (Mac: shift+apple+3  PC:  Press the Print Screen key on your keyboard. It may be labeled [PrtScn])
2. Open the resulting image in an image manipulation program (this tutorial uses Photoshop CS4).
3. Crop the image just to the inside of the content area
4. Select the website rectangle using the rectangle select tool
5. Create a new layer and fill the selection with black (for a black or grey drop shadow)
6. Blur the whole layer using Gaussian blur – you will need to experiment as to the amount.
7. Go to image -> canvas size  and set the size to 1600 pixels wide by 1200 pixels high.
8. Click the background layer (containing your screengrab) and fill it with the colour you want as the background of your website.
9. Flatten the image and save it as either a jpeg or a png and then upload to LayerSpace as your background image.
10. View your website to see if the shadow is correctly positioned. If not you will need to go back to your image, unflatten it (using the history) move the top layer a bit to where you think it needs to go, then try again.
To soften the effect you can experiment with the amount of blurring applied and the transparency of the layer containing the black rectangle. Click the thumbnails below for some screenshots of the process.

MAKING A COLOUR FADE BACKGROUND
This gives an effect like using a graduated filter on a camera.
1. Choose the lightest and darkest colours for your fade – eg black at the top fading to white att the bottom.
2. In Photoshop set the colours to those.
3. Select the Gradient tool and in the options palette choose the linear gradient option.
4. Create a new image 10 pixels wide by  1200 pixels high at 72 dpi resolution.
5. Click and drag your mouse from the bottom to the top of the image (or top to bottom depending on which way you want the fade) To make a sharper fade click and drag for a shorter distance – eg jsut over the central 1/3 of the image.
6. Save as a jpeg or png and upload as a background image to LayerSpace.

MAKING A PATTERNED BACKGROUND
You can use any image you like as a pattern and it will be repeated to fill the available screen size – it doesn’t have to be a full size image.  Images are repeated by first being positioned centrally in the window. They are then tiled from the top corner and repeated across the screen to fill the space.

It is worth exercising restraint with patterns and background images in general to avoid overkill which may end up overpowering your website content.  Experiment with variations on the above to get the best result.