Tumblr Backgrounds – How to make a custom tumblr background for free

Tumblr is a popular microblogging site with a great deal of versatility. You can customize your headers, your theme, and even your background. The beauty of Tumblr is, while you can pick a theme which will ultimately cost you some money, you don’t have to. There are free ways to modify and customize every facet of your Tumblr site, including the background. As someone viewing the site, you may consider the background as relatively unimportant; however, the background you choose and customize is reflective of you and what you post as a whole. A different background can set your Tumblog apart from all the rest, so why not take the time to customize your background carefully?

First of all, why change the background at all? Firstly, if you’re running a Tumblog for a business or other such venture, you may find that the theme selected may not offer a background that’s reflective of the business’ values or mission. If it’s a Tumblog for personal use, you may want a background which shows more of what the Tumblog itself is about, rather than the theme you’ve chosen. Just because a background has come as part of a prepacked theme doesn’t mean its the ideal theme for you to use for your Tumblog, after all. In addition, it’s fun to experiment with different backgrounds.

There are some free work-arounds to create the Tumblr background you want. Even the least technologically savvy person can efficiently change the backgrounds on their own Tumblog if he or she follows the simple steps explained here.

Options for changing your Tumblr background include:

A. Inserting a Background Image Into Your Tumblr Theme:

You don’t have to be restricted to the theme background, which, as a default, may be somewhat bland. To change your background image, follow the following process:

1. Once you’re in your Tumblr site, click on “Customize” in the upper right corner.

2. You will see “Theme” in the top navigation bar. Click on “Custom HTML” at the bottom of that menu.

3. Copy the code you see there. If need be, copy and paste it into your Notepad in order to remember it for later.

4. Now, the inline CSS needs to be altered in order to integrate the image you want as your Tumblr background. Find the following code:

5. Find the coding “body {” and inside the body tag there should be the background: line. The url of the image needs to be inserted there.

6. Replace the {image:Background} with your image url. If the image has been saved to your computer, upload it to Tumblr first.

7. Change the top left fixed repeat for top left fixed no-repeat.

8. Click on “Update Preview”. This is to help you verify the image is there as you want it to be seen.

9. Click “Save”.

B. Use Your Tumblr Appearance Panel

This is likely one of the easiest methods of changing the background of your Tumblog. It’s a fairly easy process to undertake, too.

From your Tumblr account:

1. Click “Customize”.

2. Click “Appearance” at the top of the page.

3. When that panel opens, click “Upload” and select the pattern you want.

4. If you have the option for repeating your image, choose “repeat-y” if your image needs to repeat from top to bottom, “repeat-x” if it needs to repeat from left to right, and “repeat-xy” if it needs to repeat both horizontally and vertically.

C. Create Your Own Theme

Surprisingly, this is not as challenging as the title might suggest. You’ve gone through all the Tumblr theme options, don’t find one you like, and are feeling a little frustrated as a result. Why not create your own theme?

The thing that makes Tumblr effective is that it uses only one page of HTML coding. That’s it. The CSS and scripts are all in the file’s head, so there’s nothing too fancy you’ll need to navigate. Tumblr uses blocks and variables. Variables are set off with the curly parentheses – they look like { or } – while blocks display blocks of HTML and variables for different occurrences and purposes. Blocks are set off like variables, but they are identified as blocks, like this:

{block:Posts}

Tumblr gives you several variables to use easily in the head of your HTML coding, such as:

{Title} – The html safe title of your blog

{Meta Description} – An html safe description of your blog for use within the meta tag

{Favicon} – A dynamically generated favicon url from your portrait photo

{RSS} – The url to the RSS feed of your tumbleblog

Your HTML head might look like this:

1 head>

2 title>{Title}title>

3 link rel=”shortcut icon” href=”{Favicon}”>

4 rss+xml” href=”{RSS}”>

5 meta name=”description” content=”{MetaDescription}” />

6 head>

Once you have your head in, you can go about creating some basic variables, such as:

{Title} – The HTML safe title of your blog

{Description} – The description of your blog, which may also include html

{PortraitURL-64} – The url to your portrait picture. The available sizes vary.

1 div id=”header”>

2h1>{Title}h1>

3 p>{Description}p>

4 img alt=”{Title}” src=”{PortraitURL-64}” />

5 div>

You can also tell your Tumblog – via the coding – what sorts of posts you want displayed. You will be using a variety of other blocks in order to make this happen:

{block:Text}{/block:Text} – Displays Text posts

{block:Photo}{/block:Photo} – Displays Photo posts

{block:Photoset}{/block:Photoset} – Displays Photoset posts

{block:Quote}{/block:Quote} – Displays Quote posts

{block:Link}{/block:Link} – Displays Link posts

{block:Chat}{/block:Chat} – Displays Chat posts

{block:Audio}{/block:Audio} – Displays Audio posts

{block:Video}{/block:Video} – Displays Video posts

{block:Answer}{/block:Answer} – Displays answer posts

As can be expected, there are also a variety of variables associated with each type of post, and these are:

{Permalink} – The exact url for a single post

{ShortURL} – The sharing friendly short url for a single post

{PostID} – The unique numeric post ID for a single post

Ultimately, you may end up with a code that looks like this:

1 {block:Posts}

2…

3 {block:Text}

4 div>

5 {block:Title}

6 h2>a href=”{Permalink}”>{Title}a>h2>

7 {/block:Title}

8 div>

9 {Body}

10 iv>

11 iv>

12 {/block:Text}

13…

14 {/block:Posts}

There are also a variety of free Tumblr backgrounds you can obtain from the internet for download. Sites for these include:

http://www.hot-lyts.com/backgrounds/

http://blog.templatemonster.com/2011/01/10/40-free-tumblr-themes/

http://stylishwebdesigner.com/200-best-free-tumblr-themes-for-an-amazing-blogging-experience/

However, you can also do a Google search for “free Tumblr backgrounds” and get thousands more hits.

Happy Tumblring!

Resources:

http://tumblring.net/how-to-put-a-background-image-in-your-tumblr-theme/

http://www.brandbuildsell.com/freebies/all-about-tumblr-backgrounds/

http://www.1stwebdesigner.com/tutorials/how-to-create-tumblr-theme/