MySpace - How to Put A Picture Across Your Page

Quick Overview

All of the CSS and HTML to put a picture, text, or marquee all the way across your MySpace page will be placed in the About Me section of your profile.

Across The Page

Putting something that goes all the way across the page isn't really that hard - all you need to do is make it wide enough and use absolute positioning to place it.

What makes putting something across the page tricky is that if we simply make something wide to stretch across and identify where we want it to show up, it displays on top of other content as shown below.

MySpace Rules

Membership in MySpace is free as long as members abide by a few rules. One of those rules is that existing advertising must remain in place. Whenever you add an element that spans across the page of your profile, be sure not to overlay or otherwise hide the existing advertisements.

Image Placement

It is because of these advertisements and the way the profiles are created that will limit where you can insert something that goes all the way across your page.

The simplest and best places to put an image, marquee or other text across the page are:

• The very top of the page, above the advertisement - good place for attention getting message.
• Below the advertisement at the top of the page and below the navigation menu - good placement for banner.

Image Placement

Please Note: MySpace has made some changes to how profiles appear and several websites discuss adding banners to MySpace profiles using techniques that may no longer work. Based upon their updates and a bit of my own skills, I suggest the following method. Hopefully, MySpace won't make any more changes that would cause this technique to not work.

How to Make an Image go Across Your MySpace Page

Step 1: CSS code in your About Me. If you do not already have some code in a style section, surround the code that follows with <style> and </style> tags. If you already have style tags - simply put the code somewhere in between the start (<style>) and end (</style>) tags.

body table table td {padding-top:180px;}
div table table td {padding-top:0px;}
body table table table td {padding-top:4px;}


The previous code is what tells the browser that you are going to put something after the existing banner and menu and basically shoves everything else down the page to make room.

Step 2: HTML code - put this after the closing style tag (</style>)

<div style="position:absolute; top: 168px; width: 790px; margin-left: -350px; height: 230px; overflow:hidden;">
<img src="http://www.some-web-place-for-pictures.com/banner.jpg" alt="my banner" border="0" width="785px"; />
</div>

What did all that mess do? Let's see.

Adding Your Image Across MySpace

Depending on your layout and what you are adding across your page, your measurements are going to vary somewhat from mine and may require a bit of trial and error to get the way you want. Change the numbers, but do not drop the negative sign (-) or px.

padding-top: 180px;
Make this the height of your image plus a little extra for spacing.

top: 168px;
When combined with position: absolute this causes the placement of the banner to be 168 pixels from the top of the screen.

margin-left: -360px;
This tells the banner how far to the left it should be placed. The number needs to be negative and if you are using an image smaller than 800px wide, you may want to decrease the number to better position your banner across the page.

height: 180px
This number should match the padding-top value as these two settings govern the amount of space the other content is shoved down to make room for your banner.

Marquee Across the Top of the Page

Here's the code:

<style>
body {padding-top:85px;}
div table td {padding-top:0px;}
body table td {padding-top:4px;}
</style>

<div style="position:absolute; top: 1px; width: 800px; overflow:hidden; margin-left:-355px; background-color: 111111; height: 85px" >

<div style="padding-top:20px; padding-bottom:20px; background-color:FF6600; width: 788px;margin: 6px;">

<marquee bgcolor="FF6600" style="color:white; font-size:26px; "> Welcome to Michele's MySpace Page</marquee>

</div>
<p>&nbsp</p>
</div>


This will create a marquee above the rest of the main content and by using multiple background colors and modifying the size slightly 'fakes' a border.

Customize this code for your own use by changing the following settings:

body {padding-top:85px;} and the height: 85px in the first div statement:
This makes room for the marquee at the top of the page and both values should be the same.

background-color: 111111 in the first div statement:
This is the color of the faux border.

marquee
Make changes to the bgcolor, color, and font-size to reflect your needs.

You could just as easily put regular text here by simply replacing the <marquee> tag with a paragraph tag as follows:

<p style="color:white; font-size:26px; background-color: ff6600"> Welcome to Michele's MySpace Page</p>

Heading & Banner on the Same Page

If you would like to use both examples together on your MySpace page, simply use all of the code discussed on this page. All you would have to do is increase the top value as discussed in Step 2 for image placment to allow for the height of the marquee or other text at the top of the page. With the proportions I use here, increasing top to 268 px aligned everything.

It would look something like the following:

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