Javascript required
Skip to content Skip to sidebar Skip to footer
Home / How to Add an Image to Your Tumblr Theme

How to Add an Image to Your Tumblr Theme

(updated: March 2016)

I am getting so many questions about using the backgrounds  on my side blog backgroundsbyfloralls  it is hard to reply them all individually so decided to write a  general reply/tutorial page hope it helps.

General Questions:

  • Can i use one of your backgrounds?/how i will get; them-right click is not working?

Sure this is the point of the blog in the first place/ you have to either "reblog" or "like" the post you want  then you can save them to your computer or use their url by right click from your own dashboard

  • Where do you get the backgrounds?/what about the credits?

i find them on internet via google image search or photobucket etc.. i post some of them  as original and some of them after i  edit, decorate or resize/ i try to credit them if i can find the source  for the rest just read my disclaimer please!

  • Why don't you post new backgrounds?

I wont be updating backgroundsbyfloralls  because i dont have enough time to run multiple blogs anymore but i will keep it as a source for  who wanna use the backgrounds

How to put a background image:

There are 3 diffirent  scenarios i will try to explain what to do for each of them if you wanna have a background image on your blog;

*If you have a theme with customizable background

  1. Open your blog click the "Edit Theme" button on the right top of your page
  2. Scroll down and find the  "background image" under "theme options"
  3. Click on camera symbol now you can choose any image that was saved in your laptop as the background it will upload and refresh the preview automatically if you like the result click the  blue"save" button on the top (If there is an exsisting bacground you will see a pen symbol instead of the camera click on it you will see options to remove it or choose a new photo as background )

*If your theme has a background but doesn't support to customize it;

  1. Open your blog click the "Edit Theme" button on the right top of your page
  2. Click on the "Edit Html" button (on the top near the blue image) you should see your theme code now
  3. Find the line that says body {   (use ctrl+f it will open a searh box write body {  and press enter it will find that line easily) (there is a space between body and { dont forget it!!!)
  4. After body {     try to find the line starts with;

 background-image: url

for example: it can look like this;

background-image: url(http://i878.photobucket.com/albums/ab342/vickymeow1234/tumblrbg4.jpg);

  5. now you can change the url in parentheses [http://i878.photobucket.com/albums/ab342/vickymeow1234/tumblrbg4.jpg - this is a random url i find as an example, yours will be diffirent]  with the  url of the image you want as your background (you can right click on any image and use copy url to get url of the image)

   6. click "update preview"  (the green button on the top) it will refresh the preview automatically if you like the result click the "save" button

-If your theme doesnt support backgrounds;

we need to add some coding but i am not sure it will work perfectly for each theme it is your choise to try but i need to warn you it can mess up your theme!!!

  1. Open your blog click the "Edit Theme" button on the right top of your page
  2. Click on the "Edit Html" button (on the top near the blue image) you should see your theme code now
  3. Find the line that says  body {   (use ctrl+f it will open a searh box write body {  and press enter it will find that line easily) (there is a space between body and { dont forget it!!!)
  4. after  the body { tag you need to add this code;

background-image:url({image:Background});

background-attachment: fixed;

background-repeat: no-repeat;

background-position:right;

———

TIPS:  this code will help you to add one image to your background as the one i have now but you can change last two lines as you want

*if you want the image to repeat itself as the one i have on backgroundsbyfloralls  change it to

background-repeat: repeat;

*if you want your image to be on the left side change position to

background-position:left;

——————————————-

     5.now use ctrl+f again to find the lines start with

<meta name=

there will be so many lines as a list  that start with it now we will add a new one  copy the following code and paste it to the top of  the list

<meta name="image:Background" content=""/>

   6. click "update preview"  (the green button on the top) now click the arrow (on the same line with green update preview button)it will take you back to first page

   7.  we  just added the customizable background option to your theme; now you need to follow the steps of the  "If you have a theme with customizable background "

we are done !!!!

i hope this will be helpful and good luck  :)

How to Add an Image to Your Tumblr Theme

Source: https://floralls.tumblr.com/post/19235482224/how-to-put-a-background-image-in-your-tumblr