Monday, August 30, 2010

How to create a fixed image background

Okay after tons of looking around and tons of messing around I found out a way that works for me to make my own background images for the new template designer. I'm a mega n00b when it comes to coding so if you have a problem I will more than likely not know what on earth to do. Best of luck! C:

First you need to have a picture you want to use for the background, for mine I made a rising sun sort of pattern in pink. 
The size varies since each computer screen is different, I made my background a little bigger than my computer screen which is: 2000x959

After you have your picture made and ready to go you will need to upload it on the net so we can get a direct link for the coding. I normally use ImageShack but you can use Photobucket or any other image hosting site.

All you need to do to upload pictures on ImageShack is click on the browse button choose the picture you want and press the Upload Now button.

Then it will take you to a confirmation page once it has successfully uploaded it. Now you need the Direct link for the coding part, so copy it and save it somewhere. It doesn't matter where just as long as you can copy and paste it later on.

Now keep in mind that if you have simple blue set as your template your picture will look kind of off, so play around with the templates and pick one that will go best with your background.

For mine I'm using Pictured Window (each template comes with several different patterns I chose the last pattern) Now that we have the template we want we are going to put in the code that will let us have a custom image background.

Step 1. Go to the Advanced tab
Step 2. Scroll down and go under the Add CSS tab
Step 3. In the text box copy and paste the code located below "Step 4"
Step 4. Copy the direct link  then select "insert direct link here" right click and select paste

.body-fauxcolumn-outer {
background:url(insert direct link here) no-repeat;
background-attachment: fixed

After you do this the display below should show what it will look like. If it doesn't I noticed pressing the space bar underneath the pasted code and deleting the spaces makes it work. I have no idea why lol @w@

Hopefully this worked for you, if you need any help feel free to ask. I'll try to help the best I can but keep in mind I have no idea about coding so I might not have an answer ^-^'

No comments:

Post a Comment