BACKGROUND

A website's background can create a massive difference to the overall feel of the site - a well selected image helps to tie all of the different elements together. Here you'll learn which things to look out for when selecting an image.


Selecting your image

Image selection is the most important part in creating a background - large, high quality images are best. The full-width screen size is 1920px, therefore anything that is larger than ~1600px wide is going to work well. If you select an image that is much smaller, you run the risk of having a pixelated image, compromising the integrity of your site.​​​​​​​

Good Photo - crisp and unpixelated

Bad Photo - blurry and pixelated

The Rule of Thirds

When selecting an image, it is a good idea to follow the 'rule of thirds' - a well known photography guideline that balances the different components in the image.

Sometimes you may not have many images to choose a background from, and are unable to be this picky. In that case, the most important feature to look for in an image is space at the top for a header and menu bar. The image on the left demonstrates this well - the top third is nice and empty, so would allow for a header or menu bar to sit over the top of it without looking cluttered or compromising the rest of the image.

For more information on the rule of thirds CLICK HERE

Using a background with a custom made header

More advanced users with access to design software such as Photoshop can create headers which really boost the look of your site. This software can save an image as a transparent PNG, allowing for the background to still be visible behind the header. This effect looks best on backgrounds with an adequate amount of empty space at the top of the image.

See below for an example of a custom header.