CSS Background For MySpace Pages


A quick and effective way to enhance and personalize a webpage, or section (body, div, table) is to add an image background. This can also add greater depth than a flat color. 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 myspace_help@xhtmltips.co.uk , and we will suggest some solutions and post additional 'How to …' articles.

The basic CSS code to add a background image is:

background-image: url ('<a target=_new rel=nofollow href=http://www.xhtmltips.co.uk/myspace/purple_wave_800.jpg> http://www.xhtmltips.co.uk/myspace/purple_wave_800 .jpg </a> ');
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;

background-position: background-repeat:
For example; if the gradient image started with a solid color 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 color of white.
background-repeat: repeat-y;
For a background image which has a color on the right hand side and fades to white on the left hand side, the two codes can be used together like so:
background-repeat: repeat-y; 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:
<style type = text / css> * {background: transparent; border: 0px;} body {background-image: url ('<a target="_new" rel="nofollow" href="http://www.xhtmltips.co.uk/myspace/purple_wave_800.jpg"> http: //www.xhtmltips.co.uk/myspace/purple_wave_800.jpg '); background-position: center; } </ style>
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:

<style type = text / css> body.bodycontent table tr td {background: transparent; border: 0px; color: black! important; } table.navigationBar * {background: SteelBlue; } table.contactTable * {background: CornflowerBlue; } body {background-image: url ('<a target="_new" rel="nofollow" href="http://www.xhtmltips.co.uk/myspace/purple_wave_800.jpg"> http: // www. xhtmltips.co.uk/myspace/purple_wave_800.jpg '); background-position: center; } </ style>
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.


Leave a Reply