Supported by :   My Law Forms Ltd. - Deed polls and Tenancy Agreements

CSS background for my space pages

Digify Myspace backgroundA 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 <style> </style> 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('http://www.xhtmltips.co.uk/myspace/purple_wave_800.jpg');

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 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.

background-repeat: repeat-y;

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-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('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('http://www.xhtmltips.co.uk/myspace/purple_wave_800.jpg');
background-position: center;
}</style>

If you copy the above codes including the ‘<style>’ and ‘</style>’ 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 for the see the finished effect.

This entry was posted on Thursday, June 14th, 2007 at 9:25 pm and is filed under CSS Tips, HTML help, XHTML tips. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

4 Responses to “CSS background for my space pages”

  1. Steven says:

    Thanks! Good information that I haven’t seen anywhere else.

  2. Andy says:

    Okay what if I wanted to do a color fading into another color like gradients but not as an image because I already have an image in mind?

  3. admin says:

    It would be possible to use two overlapping divs, each with a background image: the ‘upper’ div could have a transparent background image, which would allow the lower image to show through.

  4. Steve says:

    How do I disable a link on Myspace?—

    In the Interests section when editing the code at the top of the page it says to just insert <z> but that doesn’t work!!