A quick and effective way to enhance and personalise a webpage, or section (body, div, table) is to add an image background. This can also add greater depth than a flat colour. For this example let us look at how to add a background image to a myspace page; http://www.myspace.com/digify
Myspace allow users to add CSS codes to the content areas on their pages. By inserting the tags in one of the text boxes, typically ‘About me’ it is possible to change the appearance of many of the page’s attributes. Most of the standard CSS definitions are permitted, but it should be noted that changes to attributes such as z-index are not allowed. Likewise CSS codes which attempt to obscure or remove advertising will be blocked, or be in breach of myspace’s terms and conditions.
There are many aspects that can be ‘pimped’ to make your pages look cool. If you have any specific requests of ‘How do I …’ for improving your myspace (or other social networking) pages, please feel free to comment or email firstname.lastname@example.org, and we will suggest some solutions and post additional ‘How to …’ articles.
The basic CSS code to add a background image is :
This will load a purple gradient background. The location of the image file is added by using the url(”); function, which can be a local file, or a complete URI.
By default a background image will be added to the top left of the area and will ’tile’ both horizontally and vertically. It is possible through two additional CSS codes to change this setting to achieve other varied effects;
For example; if the gradient image started with a solid colour on the left hand side and faded to white we might only want it to be tiled vertically, and leave the right hand side as the defined background colour of white.
For a background image which has a colour on the right hand side and fades to white on the left hand side, the two codes can be used together like so :
background-position: right center;
With these codes we can now modify our myspace background which will be a central purple gradient, with tiling both vertically and horizontally. The myspace CSS code for this is as follows :
Whilst this does the job of adding a tiling background, it does have the unfortunate consequence of making some of the text illegible, where white or light text is shown on a white or light background.
Fortunately with a few more nifty myspace specific CSS codes this can be solved :
If you copy the above codes including the ” and ” tags into one of your myspace content areas, such as the ‘About me’ box, you should be able to see the change to your myspace page appearance.
View the myspace background example (http://www.myspace.com/digify) for the see the finished effect.