I'll show you how to do this, but be warned up front that it's not the easiest task in the world because you need to actually figure out what background picture you want to use then actually upload that to a different server, not MySpace. There are a bunch of options, but I'm going to use Photobucket for this particular example.
Your first step, therefore, is to find an image that you like and upload it onto Photobucket, as I explained in the earlier article How can I host images on the Web?
Once you've uploaded an image, you'll be able to see how to reference it a few different ways, like this:
The value that we need for this particular MySpace trick is the Url, but just leave that window alone for now and pop open another one with your MySpace profile. Click on "Edit Profile" next to your picture and find your "About Me" profile box. Scroll to the very bottom of that box and add the following CSS code exactly as shown:
<style type="text/css">
body { background-color: transparent; border: none; border-width: 0px; }
body { background-image: url(photobucket url);
}
</style>
You type that in exactly as shown into the About Me box, after all the material you've written, replacing where it shows photobucket url with the value of the "Url" field on Photobucket itself. In my case, when I use the subtle background graphic shown earlier, it looks like this:
<style type="text/css">
body { background-color: transparent; border: none; border-width: 0px; }
body { background-image: url(http://i106.photobucket.com/albums/m259/d1taylor/subtle-background-graphic.jpg);
}
</style>
The result is pretty attractive:
but perhaps too subtle! There are a couple of easy tweaks we can make to the CSS to make it more generally interesting, then we'll look at some advanced tweaks. First, add the following lines and you can "fix" the graphic so that the text content scrolls but the picture's fixed:
<style type="text/css">
body { background-color: transparent; border: none; border-width: 0px; }
body { background-image: url(photobucket url);
background-attachment: fixed;
background-position: 0,0;
background-repeat: repeat;
}
</style>
(for simplicity, I'm going to use 'photobucket url' again, but you know that you have to replace that bit with the actual Url from your uploaded photobucket picture or whatever other picture you choose to use, right?)
If you don't want "fixed" for the background attachment, you should specify "scroll", which is what you're used to seeing on Web pages. You can turn off the cookie cutter repeat in both the horizontal and vertical direction by specifying background-repeat of "repeat-x" only, "repeat-y" only or "no-repeat", and you can specify how the background graphic should line up in the window with pixel offsets from the top left (as I do here), percentages (0%,0% is the top left, 100%,100% is the bottom right) or even specific words, top, center or bottom followed by a comma and left, center or right.
Putting that all together, if you have an image you want centered, not repeating, fixed, you could use background-attachment: fixed; background-repeat; no-repeat; and background-position: center,center;
Still, what most people seem to do with background graphics is to have the image "bleed through" the individual elements of the profile, so let's do that too. Be warned, however, this is where your profile can become darn unreadable darn fast!
What I like to do is to have a sort of middle ground solution, with some areas retaining their default white background for readability while others have the background bleed through. This is so incredibly easy to do that you'll gasp! Just add three letters to the earlier CSS:
<style type="text/css">
body, td { background-color: transparent; border: none; border-width: 0px; }
body { background-image: url(photobucket url);
background-attachment: fixed;
background-position: 0,0;
background-repeat: repeat;
}
</style>
Can you see what I added? After the first "body" I added ", td" so that the background color of the 'table data cells' are also transparent. Here's what happens:
Ah, that's looking more like a typical crazy MySpace profile with a custom background graphic, isn't it? :-)
I know, you're dying to learn how to get rid of those annoying white background boxes so that all of your profile is shown against the background graphic, aren't you? This is just a few additional characters again: where we have "body, td" simply make it "body, td, table", like this:
<style type="text/css">
body, td, table { background-color: transparent; border: none; border-width: 0px; }
body { background-image: url(photobucket url);
background-attachment: fixed;
background-position: 0,0;
background-repeat: repeat;
}
</style>
The result is predictably a bit more hard on the eye, but nonetheless interesting:
Turns out that if you're willing to slog through all the possible tweaks and fiddles you can add to the CSS, there's a lot more you can do, and, of course, you can also use a far more dramatic background graphic or photograph than I have chosen for my own profile. I'll address these more advanced "div" tweaks a bit down the road!
Also, while I'm at it, I have a lot of additional MySpace Help here on the site and you can also become my friend by checking out my MySpace profile.
Sign up for my weekly AskDaveTaylor Newsletter and you'll receive even more tech and gadget help
right to your inbox, along with exclusive news and industry updates. It's good stuff. I promise!
Question: how might i do the same thing to my blog "look and feel" so that the background image bleeds through??