How To Make a Banner for Tumblr

Making a banner for Tumblr is actually easy. However, people usually have a hard time trying to add the banner on Tumblr, since they just don’t know where to put the code.

This guide is divided into two parts, the first one tells you the best sites to create the banner. The second part is the actual tutorial that tells you how to put that banner on your site.

How To Make a Banner for Tumblr. Tumblr Banner Generator Codes.

Here is a list with the best websites to create banner for your tumblr. Animated Tumblr Banners, Glitter Tumblr banners and flashing tumblr banners. All these sites allow you create a tumblr banner for free.

Glitter and Flashing Banner Makers.

  1. Pimp My Profile: This glitter banner generator for tumblr is good since the background is plain white, good for minimalist tumblrs.
  2. My Banner Maker: A good banner creator for those looking for regular banners, not glittery at all. it lets you choose not only font size, but also the background, and banner size.
  3. Flash Vortex: This is definitely the best flash banner generator for tumblr. All options are included for free: Text, Fonts, Effect, background and animation properties.

Animated GIF Banner Makers.

Creating a GIF, as most tumblr users conceive it, it’s not that easy. We are talking about micro clips of series, movies, etc that usually get subtitled. If you are actually trying to do this, we suggest you read the following article from Wired, all tools and different types of animations are explained so you can come up with custom animated gifs. Once you finally get the image uploaded to a hosting site, you just have to grab the url to add it as a banner on tumblr.

How To Put a Banner on Tumblr. Quick Tutorial.

  1. Grab your tumblr banner code that you obtained from the sites above.
  2. Now, this is very important, you must get rid of all the extra code that surrounds the banner image, since you just need the image url, which usually ends in a .jpg, .gif or png extension.
  3. Go to Customized >> Edit HTML and with ctlr+f, look for the opening body tag, which usually looks like this <body>. Sometimes these tags have ids and classes added, but most of the time you can find them by looking for <body alone
  4. Now, copy the following code and paste right after the body tag:

  5. <a href="TUMBLRURL"><img src="TUMBLRBANNER" style="position:fixed; top:0px; left:0px; opacity:1; z-index:100;" /></a>

  6. Change TUMBLRBANNER and replace it with your tumblr banner image url you have.
  7. Change TUMBLRURL with the url of your tumblr blog (you can of course get rid of the url by deleting the opening and ending a tags)
  8. Now, start positioning your tumblr banner by modifying the top & left parameters until it fits right where you want it to be.
  9. Save and Close.

If you are having trouble trying to put a banner on tumblr, just leave a comment we’ll try to reply with a solution.

15 Responses to "How To Make a Banner for Tumblr"

Add Comment
  1. corinne

    June 16, 2012 at 1:07 pm

    well im a big harry potter fan and i want to make a banner with a harry potter gif on it but how do i get the gif from the movie. a lot of people have harry potter gifs on tumblr what if i save those


  2. Jess

    June 22, 2012 at 6:44 pm

    I made my banner and got the code, I went to Edit HTML and I don’t know what you mean by ctrl+f and . I can’t find that on mine and when I right click it doesn’t say paste so I’m not sure where to put this code :( Help would be great! thank you!


  3. Maisie

    July 13, 2012 at 2:10 am

    I was wondering how you could make your banner slide down from the top after 4 seconds if you know what i mean? Thank you so much!


  4. Malcolm

    August 1, 2012 at 1:25 pm

    The image follows you down the page as you scroll… lol Its does not stay in the Header position.


  5. E

    August 11, 2012 at 12:59 pm

    This is a clear tutorial except say if I used a banner from Flash Vortex, there is no extension I can see so any help?


  6. humdeedumdeedum

    August 17, 2012 at 1:37 pm

    If you’d like to make a banner marquee, what is the code you would use? I can’t find a tutorial that I can understand ANYWHERE. Yes, I know the code for a scrolling image, but where would I put that?

    A confused Tumblr beginner,


  7. Rigby Kennedy

    August 21, 2012 at 6:29 am

    ok so on my blog the picture shows up and everything but when I try to scroll, the picture like moves too. I just want it to stay in that spot like a title… please answer!


  8. Matty Docherty

    August 23, 2012 at 8:33 pm

    I’ve been trying to make a Tumblr banner for a while and finally have but when I upload it, it doesn’t show up just a black code or something? I need help ASAP!


  9. Stephanie Perkins

    September 27, 2012 at 6:48 am

    I found this very helpful except for the fact I am not understanding how to move it. I would like to center it and that’s just not happening. I read where it says to modify the top & left parameters but quite frankly I don’t know what that means. I cant just slide it and it go where I want and I’m not good at all the code stuff.


  10. Spell Spinner

    November 24, 2012 at 4:07 am

    hi. how do you center it? when i manually adjust left parameters, it is not actually on the center when i resize the window


  11. Nikele

    November 29, 2012 at 3:30 pm

    Hello! How are you today? I hope you are happy and well. Thank you for all of your work helping people make tumblr more beautiful and customizable, which in turn adds so much happiness to their lives. I have a gif that I would like to enlarge horizontally, and use for a banner. It’s the top photo on my site, with Gaga laughing with a kiss mark on her chest. You can see it on my site. I wish so much I could at least center it, if I can’t make it larger. Thank you so very much. I didn’t know about your site, and am very glad I found it. I would love to find a widget that shows the people online on my site, on a globe, so I can see who and where people are at the time they are on my site. xoxoxo Happy Holidays!


  12. gloria

    December 27, 2012 at 4:28 am

    i have rebolgged my favorite gif a million times. how do i take the url from where it was originally posted, an make it a jpeg or something i could make an animated banner from?


  13. aaron

    January 24, 2013 at 12:06 am

    I cannot seem to find the area to put this in? You say the opening body tag? I have no clue where that is when looking at all this code.
    can you help?


  14. Maya

    January 31, 2013 at 11:10 pm

    I got the banner and I have it in the middle where I want it but when I scroll down my blog, the banner goes down with it. How do I keep it in place?


    Mr. Tumblr Reply:

    I suggest you post your problem, along with a .txt file containing the code in the following forums, they have lots of mods that can quickly help you out with element positioning


Submit a comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>