General Question

omgholilollipopz's avatar

How do I add a background image for my Tumblr?

Asked by omgholilollipopz (2points) 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:
[ http://i279.photobucket.com/albums/kk133/jean10_2008/album1/collagecolorful.jpg ]

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

<!—
IE Friendly? theme for Tumblr
http://kiyla.tumblr.com

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”
“http://www.w3.org/TR/html4/strict.dtd”>

<html lang=“en”>
<head>
{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”/>

<title>{Title}</title>

<style type=“text/css”>
body
{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;}
img{border:none;}
background-image:url(http://i279.photobucket.com/albums/kk133/jean10_2008/album1/collagecolorful.jpg)

.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;}
i{color:{color:Accents}!important;font-family:georgia;}
strike {letter-spacing:-1px;}
a.block:link{display:block;width:100%;}
a.block:hover{display:block;width:100%; background-color:{color:b};}
a:link, a:active, a:visited{color:{color:Link}; text-decoration:none;}
a:hover{color:{color:Accents};}
.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%;
}

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

^ 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:
background-image:url(http://i279.photobucket.com/albums/kk133/jean10_2008/album1/collagecolorful.jpg)

^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”>
body
{
background-image:url(http://i279.photobucket.com/albums/kk133/jean10_2008/album1/collagecolorful.jpg);
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;
}
img{
border:none;
}

jrpowell (40562points)“Great Answer” (1points) Flag as…
jrpowell's avatar

Basically you need to put the image in this block.

body {
/* stuff goes here */
}

jrpowell (40562points)“Great Answer” (0points) Flag as…
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 (40562points)“Great Answer” (0points) Flag as…
jrpowell's avatar

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

</head>
<body
background-image: url(‘http://i279.photobucket.com/albums/kk133/jean10_2008/album/collagecolorful.jpg’);
background-repeat: no-repeat;
background-attachment: fixed;>

<div class=“container”>

Make it look like this:

</head>
<body>
<div class=“container”>

jrpowell (40562points)“Great Answer” (0points) Flag as…
omgholilollipopz's avatar

i still can’t see the bg. :(

omgholilollipopz (2points)“Great Answer” (0points) Flag as…
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 (40562points)“Great Answer” (0points) Flag as…
jrpowell's avatar

Do you really want it to look like this?
http://www.weshouldbedancing.com/lol/

If you do…

body {background-image:url(‘http://i279.photobucket.com/albums/kk133/jean10_2008/album1/collagecolorful.jpg’); padding: 10px; background-color:#F8F8F8; font-family: ARIAL; font-size: 11px; line-height:100%; color:#222222; overflow-x:hidden;}

jrpowell (40562points)“Great Answer” (0points) Flag as…
khanhnghiem's avatar

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

khanhnghiem (1points)“Great Answer” (0points) Flag as…

Answer this question

Login

or

Join

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?
or
Knowledge Networking @ Fluther