Stripe backgrounds and gradient backgrounds have become a popular trait in modern web design. Although there are quite a number of online services for rolling out your own stripe background, using an application like Pixelmator gives you a bit more control over colours and some users may find it easier. Now that Pixelmator supports the export of images to the web, the process is even easier. This tutorial will show you how to create a basic stripe background which can be tiled across a website background.


Step One:
Launch Pixelmator. At the opening window, click to create a new image. In the new image dialogue window (pictured below) set the width and height to 4px. Ensure resolution is at 72 pixels/inch which is the standard for all graphics on the internet. Although it may seem a bit silly to be working from such a tiny canvas size, because this is such a simple graphic, there is no need to work from anything larger.


Step Two:
With the new image canvas open, press option + repeatedly until the canvas cannot scale up in size any larger. You may need to resize the window a bit like below.


Step Three:
In the toolbar, click the foreground colour square. In the colour picker dialogue window, click the crayons tab and choose a dark colour like lead (#191919). Press N (to switch to bucket fill) and apply this colour to your canvas.


Step Four:
In the toolbar, click the foreground colour square. In the colour picker dialogue window, click the crayons tab and choose a slightly lighter shade of colour like tungsten (#333333). Press P (to switch to the pencil tool). Go to View > Show Brushes (if the brushes window is not already open). Click to select the smallest brush size available.


Step Five:
Click and pencil 4 points diagonally across the canvas as shown below. You can either have the stripe running from the top left or bottom left. The choice is yours and will govern the direction stripes run in.


Step Six:
Go to File > Export for Web... from the Pixelmator menu. Set the format as JPEG and put the quality slider right up to 100%. Note that even though the quality is maximum, the image file size is absolutely tiny making it perfect for use on the internet. Save the image with a web safe name such as body_bg.jpg so you have a good idea what this file is after it has been uploaded.


Step Seven:
Use CSS to apply a background to a web page. The standard code is this:

body {
    background-image: url(http://www.example.com/template/images/body_bg.jpg);
}


Obviously you would need to change the URL between the brackets in the above code to point to the place where your background image is stored on your web-server.

If you are building a website using software such as RapidWeaver, this background image can be stored in the theme contents. Most themes normally contain an images folder in the theme contents where all images and icons relating to a theme are stored. Use the following CSS code in RapidWeaver to add your new background image:

body {
    background-image: url(%pathto(/images/body_bg.jpg)%);
}


Whenever the %pathto()%
syntax is used in RapidWeaver, the link to your image will automatically be entered, regardless of theme name or website URL. Whichever code you use to set a background image, the image will automatically tile. This CSS code is supported by all major web browsers.

Advanced tips
This tutorial just covers the absolute basics of creating an attractive stripe background for a webpage. It is completely feasible to use a larger canvas size to generate wider stripes or use a thicker pencil tool. Bare in mind that when using a tool such as Pixelmator, you have complete control over colours. This will enable you to create a stripe background effect which matches an existing theme or colour scheme.

Completed Example
Following the steps outlined in this tutorial, the completed background will look like this when applied to a webpage.

In this example, the stripe background effect was applied to the Composition RapidWeaver theme. These finishing touches may only be minor, but they certainly make a website design look far more 'polished' and professional. The size of the background image used means that the page still continues to render very quickly and the background will tile automatically to fill any resolution of monitor. Note that a similar stripe technique was used in the Pixelmator website, albeit a more subtle stripe colour was chosen.