General Question

omgholilollipopz's avatar

How do I add a background image for my Tumblr?

Asked by omgholilollipopz (2 points ) December 5th, 2009

I’m having a big problem here. I had tried many times but failed. :(

So, I want to add this background image:
[ ]

And this is my code so far [i don’t know if this is really necessary]:

IE Friendly? theme for Tumblr

Plays well with Firefox and Safari.
It took me a wicked long time to get it to look alright in IE though.
But it works. d:

<!DOCTYPE html PUBLIC ”-//W3C//DTD HTML 4.01//EN”

<html lang=“en”>
{block:Description}<meta name=“description” content=”{MetaDescription}” />{/block:Description}
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
<meta name=“color:Background” content=”#F8F8F8”/>
<meta name=“color:Tables” content=”#FFFFFF”/>
<meta name=“color:Text” content=”#222222”/>
<meta name=“color:Link” content=”#BBBBBB”/>
<meta name=“color:Accents” content=”#7ECBFF”/>
<meta name=“color:1a” content=”#7E7E7E”/>
<meta name=“color:2a” content=”#9C9C9C”/>
<meta name=“color:b” content=”#F8F8F8”/>
<meta name=“color:Times” content=”#000000”/>


<style type=“text/css”>
{padding: 10px; background-color:{color:Background}; font-family: ARIAL; font-size: 11px; line-height:100%; color:{color:Text}; overflow-x:hidden;}
.container {position:relative; width: 620px; margin:auto;}
.left{position:absolute; left:0px; width:410px;}
.right{margin-left:415px; position:absolute; width:200px;}
.post{background-color:{color:Tables}; padding:5px; margin-bottom:5px; text-align:justify;}
.box{background-color:{color:Tables}; padding:5px; margin-bottom:5px; text-align:justify;min-height:px;}

.box img{padding-left:3px; padding-top:3px;}
td, tr{height:0px; padding:0px;}
p{line-height:10px; padding:0px; margin:0px;}
b, .name {color:{color:Accents}!important;}
strike {letter-spacing:-1px;}
a.block:hover{display:block;width:100%; background-color:{color:b};}
a:link, a:active, a:visited{color:{color:Link}; text-decoration:none;}
.left .title {font-size:23px; font-family:times; letter-spacing:-2px; line-height:14px; text-decoration:none; background:{color:b}; color:{color:2a}!important; text-transform:lowercase; display:block; width:100%; margin-bottom:px;}
.left a.title:hover{color:{color:1a}!important; background-color:{color:b};}
.right .title, .right a.title {color:{color:1a}!important; font-size:23px; font-family:times; letter-spacing:-2px; line-height:14px; text-decoration:none; text-transform:lowercase; background-color:{color:b}; display:block; width:100%; margin-bottom:0px;}
.right a.title:hover {background:{color:2b}; color:{color:2a}!important;}
.source{display:block; text-align:right;}
.times a{display:block; text-align:right; margin-top:2px; background-color:{color:b}; color:{color:Times}; font-family:terminal; font-size:8px; text-transform:uppercase; line-height:9px;}
.times a:hover{text-decoration:none; background:{color:b}; color:{color:1a}!important;}
h3{font-size:20px; font-family:georgia; text-transform:lowercase; font-weight:normal; font-style:italic; letter-spacing:-2px; line-height:14px; margin:0px;}
.audio_player, object {text-align:center;}
blockquote{border-left-width: 1px; border-left-style: dotted; border-left-color: #666666; padding:1px; padding-left: 5px; margin: 0px;}
.pages a{font-size:100px;color:{color:Tables};}
.name{font-weight:bold; font-family:tahoma; text-align:right;}
.next {float:left;padding-top:0;}
.back {float:right; padding-top:0; padding-left:;}
.quote .times, .notes img{display:none;}
ol.notes, .action{list-style:none; padding:0px; margin:0px;}
.notes li{list-style:none; padding:0px; margin:0px;border-bottom: dotted 1px; border-color:{color:Accents}; padding-top:5px; padding-bottom:5px;}
ul#twitter_update_list {list-style:none; padding:0px; margin:0px;}

.post img {
max-width: 100%;

<link rel=“shortcut icon” href=”{Favicon}”>
<link rel=“alternate” type=“application/rss+xml” title=“RSS” href=”{RSS}” />
<meta name=“viewport” content=“width=820” />

^ That’s from the very top to the </head> tag.

But I don’t know where to place my background image url so that it appears on my Tumblr page.

I tried adding this:

^But that didn’t work. I still don’t see the image on my page. :(

Please help me, thank you.
I’m using Mozilla Firefox, btw. [i still don’t think that’s necessary. .

Observing members: 0 Composing members: 0

11 Answers

jrpowell's avatar

Try something like this. I cleaned up the formatting to stop my eyes from bleeding.

<style type=“text/css”>
padding: 10px; background-color:{color:Background};
font-family: ARIAL;
font-size: 11px;
color:{color:Text}; overflow-x:hidden;
.container {
position:relative; width: 620px; margin:auto;
.left {
position:absolute; left:0px; width:410px;
.right {
position:absolute; width:200px;
.post {
.box {

jrpowell's avatar

Basically you need to put the image in this block.

body {
/* stuff goes here */

jrpowell's avatar

Do you have a link to the site? I know it is in the screenshot you just posted but I refuse to type that out.

jrpowell's avatar

Yeah.. Something broke. Wait… WTF is this?

background-image: url(‘’);
background-repeat: no-repeat;
background-attachment: fixed;>

<div class=“container”>

Make it look like this:

<div class=“container”>

omgholilollipopz's avatar

i still can’t see the bg. :(

jrpowell's avatar

Change it back to how it originally was and I will use firebug to (try and) come up with a fix.

Right now it is very broken.

jrpowell's avatar

Do you really want it to look like this?

If you do…

body {background-image:url(‘’); padding: 10px; background-color:#F8F8F8; font-family: ARIAL; font-size: 11px; line-height:100%; color:#222222; overflow-x:hidden;}

khanhnghiem's avatar

What is the code for IE friendly theme? thanks :)

Answer this question




to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
Knowledge Networking @ Fluther