The organiser of the event (The Adventurists) provide each team with a basic website with a blog and other features. However Bharat Express were not happy with the look of these sites, and so appointed me to design a template to work with the organisers systems, and to advise and assist with other IT related matters.

My brief was to create four sites with a common look, but the headers for each were to be different – each header had to have a phot0 of that team’s car.

Speed was of the essence because the rally starts tomorrow (17th July), and whilst the template was designed, it took a while for the teams to give me the content to put on the four sites.

The job was a little tricky because it involved working out how to use The Adventurists web platform, and design the template using a mixture of CSS and HTML,  but I managed it, and both I and the teams are delighted with the results (see screenshot below).

Screenshot of the site for Bharat Express Team 1

Each team’s site had a similar design, apart from the headers which had to incorporate the car that particular team was driving (see below):

In addition to the site design, I will be providing internet and technical support for the team whilst they are en-route to Mongolia. Their journey begins tomorrow from Goodwood Motor Circuit. If you would like to sponsor them please visit their gateway page (designed by another company unfortunately – they had this done before I got involved) at www.bharatexpress.co.uk

• position a background image
• specify whether to repeat (tile) or show the image only once
• fix the background image so that it stays stationary when the page is scrolled

Positioning a Background Image

This snippet of CSS will place a background image at the top left of the browser screen:
#body {
background-image:url('http://[URL OF YOUR BACKGROUND IMAGE HERE]');
background-position: left top;
}

The first term after background image specifies the x-axis position, and the second the y-axis. Using simple english, you can specify the position as follows:
background-position: left top;
background-position: right bottom;
background-position: center center;

or you can specify position in pixels: background-position: 75px 25px;

or a percentage of the display size of the browser: background-position: 30% 40%;

Repeat a Background Image

To repeat or tile a background image use the following code:  
#body {
background-image:url('http://[URL OF YOUR BACKGROUND IMAGE HERE]');
background-repeat: repeat;
}


You can also repeat along the x-axis only using repeat-x, or along the y axiz only using repeat-y

Show a background image once only

We use the code background-repeat: no-repeat; to specify that the background image should only be used once:
#body {
background-image:url('http://[URL OF YOUR BACKGROUND IMAGE HERE]');
background-repeat: no-repeat;
}

Fix a Background Image

So that the background image does not move when the page is scrolled, we use background-attachment:fixed;:

#body {
background-image:url('http://[URL OF YOUR BACKGROUND IMAGE HERE]');
background-attachment:fixed;
}

Combining the above

We can of course combine various attributes to one image, for example:
#body {
background-image:url('http://[URL OF YOUR BACKGROUND IMAGE HERE]');
background-repeat: no-repeat;
background-attachment:fixed;
background-position:left bottom;
}

Note re embedded CSS vs Stylesheets

I have assumed that you are embedding CSS in a style sheet rather than embedding CSS in your web-page.