GreatWebLayouts.com Example 1: Add an image as background to your MySpace Profile page

Example 1: Add image as background to your MySpace page

Hi again,

I am assuming you read the previous Example 0, so let's get into adding a background to your MySpace Profile page.

1)Log onto your MySpace HOME page at www.myspace.com.

2) Click 'Edit Profile'.

3) Find the BOX (if you had any code previously entered in the BOX then copy and save it (so that you do not lose that code)).

4) Next enter the code below in the BOX.

Example 1: 
 
<nff code="layout">
<style type="text/css">
.code { GreatWebLayouts for myspace}
</style>

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

5) Click Preview Profile.

6) Note from Example 1 code that we now have a background image showing underneath
the text and other stuff that makes up your MySpace Profile page.

7) What to look for from Example 1:

That the added background image is completely in back of all the text and other stuff that is rendered (displayed) on the MySpace Profile page. This makes the image look like just a border around your MySpace Profile page at this time. We will make the background image more visible in Example 2.

8) Click Save and view the change at your www.MySpace.com/yourURL_name.

9) After saving, if you go right to www.MySpace.com/yourURLname you might find that the newly added background is not there. That is because MySpace is doing a bit of work for you. They are updating the code for your profile in their database and how long this takes depends on how much traffic MySpace is handling at that time. Click refresh your browser. If still no background wait a little time and refresh again. Just recall each refresh is a 'Hey you!' to the web servers at MySpace and hence adds to the traffic MySpace is handling at that time. So give MySpace a chance to update your profile.

9) Did you notice the code line ("http://i113.photobucket.com/albums/n210/gwldn/Nature/morning_glory_001a_1000x800.jpg"); ?

That line of code is where we provide the location and name of the image that we want to use as a background.
I went to www.GreatWebLayouts.com and found in Jewel Tones a light color image.
I found an image and clicked that thumbnail.
At the top of the page displaying the full image there is a left button for highlighting the displayed URL. I copied and then paste that URL into the code for Example 1.
I chose a light color image for this example because we have not yet covered changing font colors of the text on a MySpace Profile page. If we had used an image with coloring close to any of the font colors present on the MySpace Profile page then the text in that color would be hard to read. I will do examples later on for changing font colors in various tables on the MySpace Profile page.

10) A word on pointing to an image.

The image mentioned above is stored on the website Photobucket.com. You can point to it as I did in this example (which would link the image to our storage area at Photobucket.com), but I suggest that when you find images that you like that you store them in your own storage space. This way you will have a copy of it. Photobucket.com and many other websites offer free storage. Sorry, I do not know the exact size of the storage that they offer for free because our Photobucket account is for storage of a huge number of images.

If you copy the image into your storage area (on a web server or web site such as Photobucket) then you would change the image URL to point to your copy. For Photobucket.com the parts of the URL that I highlighted in blue would change to reflect your storage area on Photobucket. "http://i113.photobucket.com/albums/n210/gwldn/Nature/morning_glory_001a_1000x800.jpg") and "/Nature" would be removed from the URL because it is a subdirectory for our Nature images.

11) Remember in Example 0 we discussed how so much of the code in these Examples is like a template.
In Example 0 we had


1) <nff code="layout"> 
2) <style type="text/css">
3) .code { GreatWebLayouts for myspace}  
4) </style>
5)
6) <style type="text/css">
7) table, tr, td, li, p, div { font-family:tahoma; font-size:30px;}   
8) </style>
9)
10) </nff code="layout">

The different between Example 0 and Example 1 is line 7. In Example 0 we had


7) table, tr, td, li, p, div { font-family:tahoma; font-size:30px;}

In Example 1 line 7 is


body {
	background-color:transparent;
    background-image:url("http://i113.photobucket.com/albums/n210/gwldn/Jewel_Tone/jewel_tones_0096_1000x800.jpg");
    background-attachment: fixed;
	background-position: top;
	background-repeat: no-repeat;
	border-color:ffffff;
	border-width:2px ;
	border-style: dashed;
	}

The reason I am bringing this up is to emphasize how these two Examples change different parts of the MySpace Profile CCS (cascading style sheet) rules.
Line 7 in Example 0 made a change to font size of text in the main table.
Line 7 in Example 1 adds a background to the body of the MySpace Profile page and then other attributes of the body tag are addressed such as only display this image once (background-repeat: no-repeat;). If you wanted this image tiled across the background you would enter different values in the shown body attributes. We will get to that in future Examples.

In Example 2 we will make this background image more visible on 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.