Introduction | Simple Profile Backgrounds | Add a Banner or Two | Faux Frame Style | Making a New Frame | Blog Style Backgrounds
Copy and paste one of the following lines into one of your bio fields:
The javascript will produced a page very similar to the following with the profile frame removed.
The light cream center which remains is our profile container. This has the ID of #profileContent assigned to it.
Please NOTE that the left edge of the profile area is right up against the pictures and the text.
The right side will have about 2 pixels between the edge the the right edge of the stats box.
We are going to set up a cascading style sheet (CSS also call style sheet) for our page so we can start decorating it.
Don't let that term scare you. It's just the name. Think of it like a game or puzzle that becomes easier each time you play it.
For more detail on CSS please visit the Pawsome Pages forum => The Cascading Style Sheet ( Dogster link / Catster link )
THE FOLLOWING MESSAGE IS VERY IMPORTANT!!!
The first line of your style sheet must be <style type="text/css">.
The last line of your style sheet must be </style>.
ALL of your style code goodies will be placed between these two lines.
Here we go! This is the image we are going to use for our main background.
The name we use to identify the whole page background is "BODY". Now we are going to define how we want that section to look by adding "properties".
The property for a background image is "background-image" and the pointer to the location of your image is "url(your-image)".
NOTE: We recommend putting all of your images for your page in your personal account at http://www.Photobucket.com. Even the ones from sites that create backgrounds for Facebook and Myspace pages. Just download the image to your computer, then upload it to your Photobook account. Once you have your image uploaded, copy the "Direct Link" and put it in place of the "your-image" part of the URL.
We like the look of our background NOT scrolling with the text on our page, so we are going to add another property "background-attachment". There are 2 options which go with this property, "scroll" (which is the default) and "fixed". Anytime you want to use the default, you do not have to include that property and option in your style sheet.
The results of these changes will look something like this:
Add the following code to our style sheet to have the background show behind our profile information.
This look of the same background throughout maybe suitable for those who have large size items in their bio fields but do not like the look of going outside the frame.
Here's another reason to use "fixed" with your background image. If a piece of your text cannot be seen, the user can scroll it to a different position. The image not moving with the text allows the user a chance to view the text against a different part of the background.
Here is what the full cascading style sheet for the above sample looks like...
Here are some screen shots of pages with a transparent profile area so the background shows through. Click on a picture to see a larger view.
Self-portrait background by Sam
Want to create a blog style background? You now have the steps you need to remove frame and profile background.
Go HERE to learn more about blog style backgrounds.
<< Previous Next >> "Profile Backgrounds (Method 1) - Plus, A Simple, Simple Profile Frame"