About   All Tips   Tips by Category   Tips by Ability   Help!

Easy Code For Installing Backgrounds

The one thing that I dislike about most custom backgrounds is that they are large in size, which means that they are slow to load. I used to place background codes directly within the body section in the html of a blog template until I discovered a way to install a background using an html/javascript gadget. Now the blogs that I design seem to load so much faster because I position the background code so that it loads last instead of first.

This tip assumes that you already know how to create your own background as well as how to get a direct link for it. The tip itself is beginner, but the background concept is advanced. For help with creating your own background, check out this tip by Kevin and Amanda or this video tip by Teresabelle Designs. Warning: Making a blog background can be VERY frustrating. You have to have the proper software as well as a general knowledge of how to use it.

How To Install A Background - The Easy Way

1. Remove the current background code from your blog (if there is one). If you have a direct link to a background in the body section of your template, it will show up before the new code. It is important that you delete the existing url before beginning. You can leave the rest of the background code in your template in most cases. Just delete the url. Be sure to download a copy of your current template before making changes to it!

2. Copy the following code and replace the purple section with the direct link to your background image. Be sure to keep the parentheses around the url.

<style type="text/css">body {background-image: url(
https://lh3.googleusercontent.com/_rVxqe4eGKc0/TX-JJu4d_NI/AAAAAAAACy0/1AGyCe6Wth4/s0/bck.jpg); background-position: center; background-repeat: repeat; background-attachment: fixed; }</style>

3. Paste the code with your background link into a HTML/Javascript gadget. Save.

4. Move the background gadget to where you'd like it to go. I prefer to put it at the very bottom of the rightmost sidebar. Most blogs load from top to bottom, left to right. I would rather my readers be able to view my content while waiting for my background to load. Click here for help moving gadgets.

That's it! Hope this tip helps! :)

Related Posts:
Backgrounds: Move That Code!
Improve Your Loading Time
Rearrange The Gadgets In Your Sidebar

Have you been helped by my tips?
Consider grabbing my button or adding this blog to your bloglist!

Want to share this tip with your readers?
I would be honored for you to link back to this post!

Please do not copy and paste my words and images into your own posts.
I work hard on my tips and and wish for everything to remain on this blog.
Thank you for your cooperation! :)


website design company said...

thanks for the code it worked perfect
website design company

Gen said...

Thanks for this tip! Or well writing the javascript code nice and clear.
I had already found the script code from The Cutest Blog on the Block, from their own free backgrounds, but wanted to make my own background image. They have %20 and other letters and symbols that make the script hard to read and understand and filter. Wasn't sure if I could remove those %20, I know a bit of css but not enough to start playing too much with it!
I`ll definetly be looking at your tutorials and tips while designing my blog in the coming weeks! And I`ll list your blog in the post I`ll dedicate to resources :)

Alex Smith said...

Wow! great tutorials!
Valencia High School Senior Photography

website design said...

I am impressed. I don't believe Ive met anyone who knows as a lot about this subject as you do. You are truly nicely informed and really intelligent. You wrote something that folks could recognize and created the subject intriguing for everybody. Truly, excellent blog you have got here.
website design