We can actually begin to make the background a focal point of our websites rather than an afterthought which fills a space. The following example shows a great way of how the background spills into the header. This technique also makes the design look bar more fluid and less segregated. But because the background image is in the background we can still layer content and top of it without fear of hiding or ruining the image!

Backgrounds are evolving
Backgrounds have come along way since the beginning, whereby there were some horrendous tiled backgrounds that really hurt the eye. Then came huge image backgrounds which took a long time to load up and often couldn’t be seen clearly. We are now at the stage where backgrounds have evolved to a mature stage whereby they can play a much bigger role in our designs. The average monitor size has increased markedly in just the last few years, as well as the introduction of transparent png’s which allow us to see through to the background. With the introduction of CSS3 transparency will be one of the major features and will again allow us to show off our stylish backgrounds in the form of a ‘layered approach’.

There are two different ‘repeat background’ techniques. The first of these is the most simple and I’ll give you a little run through now. Before you begin take a gander at the final result:

1. So for step one create a tile 800px x 800px in Photoshop and set a background colour.

2. Create a custom brush….select your brush and click on the centre on the page. Now go to Edit>Define Brush Preset.

Now select that brush, go to your brushes palette and apply the following options to give it a nice scatter effect:

Size jitter: 18%
Scatter: 789%
Opacity Jitter: 100%

3. Get painting and dot your brush around playing with different sizes and opacities as you go.

4. Now this is the magic. Make sure the layers are merged into a flat document Now go to the menu and choose Filter>Other>Offset.

Set your horizontal and vertical offset to half the pixel dimensions of your canvas (+400px) and select the wrap around option. Now we’ll just need to clean this up.

5. Now it’s time to cleanup, select the background colour and start to paint over the problematic areas. Don’t worry if you destroy any circles in the meantime, you can paint new ones in. (Just make sure when adding new circles and anything else that you stay away from the edges. The edges are the key to the smooth repetition.

6. Once you’re happy with it scale it down to whatever size you’d like and save it for web.

7. Now create a HTML web page and add this code into your CSS:

body { background-image: url(yourFilenameHere.jpg); background-repeat: repeat; }

You should see a nice smooth effect. Check my effort; not bad for a quick job!

The second technique is more complex and looks at using more complex patterns and graphics, but I will look at this later.

Give the background an integral role in the design process.
So lets see if it’s appropriate to make backgrounds the focal point of our site rather than an afterthought. A repeated background can establish the syle for the rest of your site, so instead of making the background the last thing you do (ie. Once the site is built!) make it the first thing you do and give it a prime role in the design process.

 |    |