MySpace Image Backgrounds

Continuing from our previous page on creating MySpace Backgrounds, we now move on to using images.

Don't forget, to change your profile's formatting . . .

1. Log into your MySpace Account.
2. Go to Edit Profile.
3. Go to the About Me section.

This is where the fun and creativity starts!

Images for MySpace

Before we can use an image for a background for our MySpace page, we have to store that image somewhere online. The good news is that there are many free services where you can store images for use on your profile, the bad news is some of them are horrendously slow. I would recommend you use a bit of trial and error to find one that is quicker to load the images. A better solution is to beg/borrow space from someone who has an existing website or get a cheap webhosting account.

Once you have the image available online, you can use it for your MySpace background. Simply take what we did in the last section and add another line.

<style>
body
{
background-color:333333;
background-image:url(http://www.zzzzz.com/back.jpg)
}
</style>


In the previous example, you would replace www.zzzzz.com/back.jpg with the actual location of the image.

Now we have a background image that tiles down and across the entire page, as shown below.

Background Color & Image?

Once you add a background image to your MySpace profile, it is a good idea to also use a similar color and set it as your background-color. If there is some sort of problem with your background picture loading, at least the background color will show up. Additionally, if the image takes a moment or two to load the background color will load quickly and help reduce how poorly your profile will look while it is loading.

Background All Over

But, what if you want that background color or image to cover your entire MySpace profile? That too is not too difficult, we just add a bit more code to our profile.

<style>
body
{
background-color:333333;
background-image:url(http://www.zzzzz.com/back.jpg)
}
table
{background-color:transparent;}
</style>


Since MySpace pages are made up of a series of tables, by setting the background to transparent we let the background of the body or entire page show through.

By adding the new table style definition, my profile page now looks like this:

If we want our background to truly appear all over the page we need to modify the table style definition slightly to include all rows and columns.

<style>
body
{
background-color:333333;
background-image:url(http://www.zzzzz.com/back.jpg)
}
table, tr, td
{background-color:transparent;}
</style>


Now my profile page has the background pattern everywhere.

As you can see from my example, there's still more work to be done; much of the text is displayed in colors that are too similar to my background. How to make those changes will be discussed in a later tutorial.

Since my goal is to make my profile look like Help For Web Beginners, I don't want the flowery background to cover the entire page - only the sides. In my situation, my code will need to look like this:

<style>
body
{
background-color:333333;
background-image:url(http://www.zzzzz.com/back.jpg)
}
table, tr, td
{background-color:333333;}
</style>


And my page will look like this:

My Profile, My Look

Much of the trick of pimping out your MySpace profile is the knowing where and what needs to be assigned a different style. I started with my profile's background styling as this will drive all other formatting decisions, particularly text color. As I share my experiences in creating my unique MySpace page, we will again visit with the background tags; but, for now we will leave that for another day and page.

Be sure to check out Help For Web Beginners other MySpace Tutorials and HTML & CSS Tutorials.

Web Tutorials: Templates provides some suggestions on how to customize background images from pre-made templates.