Example 6: Making an image with text to add to the Contact section of
your MySpace Profile Page



Want to use your own image as background to the Contact section of your MySpace Profile page? You need access to a software program where you can crop, resize and add text to an image.

In our previous Example 4 and Example 5 I discussed adding an image to the Contact section.

Again, as I stated in Example 4 and Example 5:

Go to If you want to use any other images that I use as backgrounds for the Contact section.

These background images are all size 300x200 pixels. I have seen MySpace pages where the Contact section images are 300x150 pixels. If you use other than 300x200 pixel size images then change the code: 

	 .contactTable { width:300px !important; height:200px !important ....


Part 1: To start this discussion, to the right is a photo of my MySpace profile page with no added coding. Example 6 screen shot 1


Part 2: I added an image behind the Contact section with the following code: 


<gwl code="layout">
<style type="text/css">
.code { GreatWebLayouts}
</style>

<style type="text/css">

	.contactTable { width:300px !important; height:200px !important; 
background-image:url("http://s113.photobucket.com/albums/n210/gwldn/My
Space_Contact_300x200/Flower_Blue_300x200.jpg"); 

background-attachment:scroll; background-position:center center; background-repeat:no-repeat; 
background-color:transparent;} 

.contactTable table, table.contactTable td {padding:0px !important; border:0px; 
background-color:transparent; background-image:none;} 

</style>
</gwl code="layout">
You can see that the blue text in the Contact section blends in with this photo. Example 6 screen shot 2


Part 3: But before I address putting text on the image that I am using in the Contact section, I decided to first add a background image to my Profile page with the following code: 


 body {
	border:2px dashed ffffff; background:FFFFFF 
	url('http://i113.photobucket.com/albums/n210/gwldn/Mosaic_2/mosaic_00186_1000x800.jpg') 
	no-repeat fixed center 50%; 
	}

The full code is: 

<gwl code="layout">
<style type="text/css">
.code { GreatWebLayouts}
</style>

<style type="text/css">
body {
	border:2px dashed ffffff; background:FFFFFF 
	url('http://i113.photobucket.com/albums/n210/gwldn/Mosaic_2/mosaic_00186_1000x800.jpg') 
	no-repeat fixed center 50%; 
	}       

	.contactTable { width:300px !important; height:200px !important; 
background-image:url("http://s113.photobucket.com/albums/n210/gwldn/My
Space_Contact_300x200/Flower_Blue_300x200.jpg"); 

background-attachment:scroll; background-position:center center; background-repeat:no-repeat; 
background-color:transparent;} 

.contactTable table, table.contactTable td {padding:0px !important; border:0px; 
background-color:transparent; background-image:none;} 

</style>
</gwl code="layout">
But I note that my Profile page background image isn't showing through the whole page, it is only showing around the edge. Example 6 screen shot 3


Part 4: To show the background image behind my whole Profile page, I added the following code: 

 table, tr, td { background-color:transparent; border:none; border-width:0;}

The full code is: 

<gwl code="layout">
<style type="text/css">
.code { GreatWebLayouts}
</style>

<style type="text/css">

	body {
	border:2px dashed ffffff; background:FFFFFF 
	url('http://i113.photobucket.com/albums/n210/gwldn/Mosaic_2/mosaic_00186_1000x800.jpg') 
	no-repeat fixed center 50%; 
	}       

table, tr, td { background-color:transparent; border:none; border-width:0;} 

.contactTable { width:300px !important; height:200px !important; 
background-image:url("http://s113.photobucket.com/albums/n210/gwldn/My
Space_Contact_300x200/Flower_Blue_300x200.jpg"); 

background-attachment:scroll; background-position:center center; background-repeat:no-repeat; 
background-color:transparent;} 


</style>
</gwl code="layout">
This is what I wanted. Just remember, that when you add the code to include the background image in the body tag that:
when you preview your code change in your edit mode that a background image for the body tag shows up as an edge
so you need to save your code and view your http://www.myspace.com/YOUR_MySpace_Name page to see the background image behind the full Profile page.

Next I will add text (to my image) to overlay the blue text of my Contact section.
But first spend a few moments getting familar with the eight links displayed within the Contact section.
On your http://www.myspace.com/YOUR_MySpace_Name page mouse over the links Send Message, Add to Friends and so on. Right now you can see the words like Forward to Friend, but shortly you are going to make those words invisible and so you need to be familiar with where these links are on the Contact section. For example notice that when you mouse over Forward to Friend that you see (at the bottom of this IE browser page) the link http:....forwardprofile. 		Example 6 screen shot 4



Part 5: To determine where to put the text on my image, I take a screen shot of my Profile page, crop out and save the Contact section. I put that saved snapshot of the Contact section and the image I'm adding text to side by side.
I also like to work on these images at 600x400 pixel in size when I am adding text.

For this image, to add text, I am using font: Fine Hand, Size: 10. I entered the wording (such as Chat Time instead of Send Message) I want for my links in the Contact section (this is the right-hand side image). Right off I see I need to resize this grouping of text.

Example 6 screen shot 5


In the next photo I have grabbed the sizing bars around the text and made the grouping smaller. Then I resize the image to 300x200 pixels and saved the image. Example 6 screen shot 5b


Part 6: To hide the text of the Contact section, I added the following code: 


.contactTable a img {visibility:hidden; border:0px!important;}

The full code is: 

<gwl code="layout">
<style type="text/css">
.code { GreatWebLayouts}
</style>

<style type="text/css">

	body {
	border:2px dashed ffffff; background:FFFFFF 
	url('http://i113.photobucket.com/albums/n210/gwldn/Mosaic_2/mosaic_00186_1000x800.jpg') 
	no-repeat fixed center 50%; 
	}       

table, tr, td { background-color:transparent; border:none; border-width:0;} 

.contactTable { width:300px !important; height:200px !important; 
background-image:url("http://s113.photobucket.com/albums/n210/gwldn/My
Space_Contact_300x200/Flower_Blue_300x200.jpg"); 

background-attachment:scroll; background-position:center center; background-repeat:no-repeat; 
background-color:transparent;} 

.contactTable a img {visibility:hidden; border:0px!important;} 

.contactTable a {display:block; height:28px; width:115px;} 

.contactTable .text {font-size:1px!important;}

.contactTable .text, .contactTable a, .contactTable img {filter:none!important;}



</style>
</gwl code="layout">
Note that though this code addition has made the blue text in the Contact section not visible that the links are still there. You can tell this by the fact that I put my mouse over the Rank area on the Contact section and the rank link shows in the URL listed at the bottom of the IE browser page. Example 6 screen shot 6


Part 7: To exchange the image in the Contact section to be one with text I entered the following in the code: 


.contactTable { width:300px !important; height:200px !important; 
background-image:url("http://s113.photobucket.com/albums/n210/gwldn/My
Space_Contact_300x200/Flower_Blue_w_text_300x200.jpg");

The full code is: 

<gwl code="layout">
<style type="text/css">
.code { GreatWebLayouts}
</style>

<style type="text/css">

	body {
	border:2px dashed ffffff; background:FFFFFF 
	url('http://i113.photobucket.com/albums/n210/gwldn/Mosaic_2/mosaic_00186_1000x800.jpg') 
	no-repeat fixed center 50%; 
	}       

table, tr, td { background-color:transparent; border:none; border-width:0;} 

.contactTable { width:300px !important; height:200px !important;  
background-image:url("http://s113.photobucket.com/albums/n210/gwldn/My
Space_Contact_300x200/Flower_Blue_w_text_300x200.jpg"); 

background-attachment:scroll; background-position:center center; background-repeat:no-repeat; 
background-color:transparent;} 

.contactTable a img {visibility:hidden; border:0px!important;} 

.contactTable a {display:block; height:28px; width:115px;} 

.contactTable .text {font-size:1px!important;}

.contactTable .text, .contactTable a, .contactTable img {filter:none!important;}

</style>
</gwl code="layout">
With this text on the image I then click each of the 8 links within the Contact section to make sure I have put the text over the appropriate area of the section. Example 6 screen shot 7






Thank you for viewing these examples. I hope they have helped you and also spiked your interested in adding your own style to your MySpace Profile page.

If you want to receive an email when I add more help text then click the Subscribe button on the home page of www.GreatWebLayouts.com.