HOW TO: Typepad - Adding a Background

Adding a background image to your blog can make it even more beautiful and help it stand out from the rest! However, you do need to have the Pro package in order to add a background in Typepad (the $14.95/month package).

Michelle Laycock, www.laycockdesigns.com, can design a beautiful banner for you and a coordinating background as well!

Adding a Background

1. First, you have to have the Pro package, the $14.95 a month package. This allows you access to the Custom CSS under the Design tab.  

2. Then, you must have the image you want to use (again one you created yourself or had someone like Michelle Laycock or other designer design).

3. Upload the image to your Typepad account (Control Panel, Files, Browse for the image and then click Upload).

4. Once uploaded, click on the name of the image on the left and it pops-up a window.

5. Select the entire URL address and Copy it.

6. Go to the Design Tab, then Custom CSS and type the following for example:

body {
background: url(http://heatherporto.typepad.com/background.jpg);
}

or if you have a static background then the code would be:

body {
background: url(http://heatherporto.typepad.com/background.jpg);
background-position: top;
background-attachment: fixed;
background-repeat: norepeat;
}

7. You need to Paste the URL from your Typepad account where my path is!

8. Save changes.

9. Republish your blog and you're done.
 
Happy Blogging!

Comments

[Logo Design]

Some fascinating! I am really impressed. Thanks for sharing this great stuff. Brilliant!

[melinda]

Heather it is a small dot background. I sent you a direct email with a link to my blog so you can see. Thank you so much for your help~

[Heather Wright-Porto]

It depends. But what I'm thinking is that you will need to create an image that is large, such as 1800 x 1200 for example, where 900 pixels of the 1800 px (wide) needs to be filled in white. So the 1800 pixes is made up of the side 450 px, then a 900 px white block, then more decorative background on the right of 450px.

Make sense?

Or is it that you are using a small graphic to be titled, repeated , such as a polka dot pattern?

Heather :D

[melinda]

So the mid section has to be created? I have a three column layout with typepad, and I added the background, so the entire page is my background right now. How would i create the midsection in photoshop? My blog needs a serious facelift! Thanks for your help~

[Heather Wright-Porto]

Hi Melinda.
Yes, I know what you mean. So, in my actual background, the center area is white in the actual image. You can use Photoshop or some photo editing software to select the center of your background, about 900 px in width, and "fill" it with "white" or other light, desired color.

Make sense?
Let me know. I want to help ya make sure you get it installed correctly :D

[melinda]

Thanks for the instructions! I was able to add my background successfully however the whole page is the background. So the text and photos cannot be seen. It needs to be white, like yours, but I cant figure out what to do next. Will it show up once i hit save? Thank you so much for your help!!

[rani]

thanks for these easy instructions!!!

[Kate I]

Thanks for these instructions on adding a background image on typepad...is there a specific image size that works best for this? Also, is this for the whole background page - background and main content column - or is it just for the area behind the main content column (the blue area on on your blog).

Thanks kindly...I'm trying to teach myself some blog design and find Typepad's instructions geared more for those who are already familiar with html. I really appreciate how generous you are with your knowledge!

[Anthea Goodman]

Wow, thanks for these instructions! So much easier to understand than Typepad's instructions! Now all I need is to find an image I'd like as a background!