Dynamic Background Changer for Atari Australia website

25 Jul 2008

Atari were looking to liven up their game overview pages. Previously all pages on the website had the same background image and colour. Atari wanted to match a background image with the game overview page and be able to set the background colour dynamically to blend into the background image. Part of this functionality was the ability for the standard background image and colour to be used as default.

Atari default games overview page

The original games overview page background, and now the default background image and colours. 

The first part of this job was to override the default stylesheet background image and background colour. This was done in the header component of the html by inserting the following css code after linking to the normal stylesheet:

<style type="text/css">

body {  background: #000000 url('<imagepath>') top center no-repeat;}

</style>

Using css I have set the body tag background colour and background image in one line. The background colour and background image are being dynamically generated. Atari configures the colour and the image in the content management system. I also put logic around the code above, so that it will only appear in the html code when the colour and image have been set in the content management system. If those values are not set, that piece of code does not appear and the page uses the default background colour and image.

I also removed the drop shadow on either side of the website if a dynamic background was detected, to allow for seamless integration of the animated flash component and the background image.

After system testing we deployed the changes to the website and informed Atari. You can see a live example here: http://www.atari.com.au/games/overview.do?id=628. As you can see the result is quite impressive and very eye catching. It is worth noting that there is a reasonable amount of effort involved from Atari to create the background image, the flash and seamlessly integrate the two. But the final results are excellent.

Atari dynamic background changer example

The final product. A dynamic games overview page -  http://www.atari.com.au/games/overview.do?id=628

If you are interested in advanced website features such as the dynamic background changer, please contact us. At Black and Hayden Consulting we have developed our own content management system which we can customise to suit your businesses’ advanced requirements.

<<back