General Question

bunnygirl50665's avatar

How do I change my background for the Tumblr theme (bubbles)?

Asked by bunnygirl50665 (80points) September 18th, 2009

I want to change the background of my tumblr theme, bubbles, to this.http://media.photobucket.com/image/vintage+background/xmaterialgurliex/0b67f8b4.gif?o=131

How do i do that? Please try to be detailed.

Bubbles theme: http://bubblestheme.tumblr.com/

Observing members: 0 Composing members: 0

17 Answers

Allie's avatar

Go to your Tumblr page (not the dashboard), click on customize in the top right corner. Click on themes. At the bottom of the tab that pops open, click use custom HTML. Somewhere in there you’ll see a spot where you can replace whatever your current background image is and use whatever one you want to. Unfortunately, that’s as far as I can get you. I’m not very good with HTML and even worse at explaining how to do anything with it.
If you want to give it a go, you can fiddle with it until you get it how you like it. Click the update preview button to see the changes you’ve made. Once you like it, click save changes.
Also, you can always look for tutorials online or see if there is a Tumblr layout maker (or whatever it may be called).

bunnygirl50665's avatar

I did try to do that earlier, but I had failed. But thanks for your help anyways.

Allie's avatar

And here come the HTML whiz kids…

jrpowell's avatar

body
{
background-image:url(‘http://imgur.com/61iK8.jpg’);
}

Add the obvious line to the body tag.

example
View the source.

edit :: and the url you provided is wonky. so I upload the image to imgur. <—my favorite free image hosting place.

bunnygirl50665's avatar

I am still a bit confused on how I can actually get the url for the image. I think this is where i usually screw up on this.

bunnygirl50665's avatar

ahhh…ok. i will try that.

bunnygirl50665's avatar

Erg. I don’t understand what’s wrong. Here’s what my code looks like so far.
body
{
margin: 0;
padding: 0;
background-image:url(‘http://www.pillowpersuasion.com/samples/back.html’);
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333333;
}

bunnygirl50665's avatar

The video won’t play on my computer.

bunnygirl50665's avatar

Strange, it’s still not working.

jrpowell's avatar

body
{
margin: 0;
padding: 0;
background-image:url(‘http://imgur.com/61iK8.jpg’);
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333333;
}

bunnygirl50665's avatar

Technology hates me. I still don’t understand what’s wrong!

bunnygirl50665's avatar

Here’s my code up until the header. Not sure that all this is really required for you to see, but I figured i’d just show it,
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<!—

Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Title : Balloonr/Bubbles
Version : 1.0
Released : 20070813
Description: A two-column design for 1024×768 resolutions suitable for blogs and forum sites.

—>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“content-type” content=“text/html; charset=utf-8” />
<title>{title}</title>
<link rel=“shortcut icon” href=”{Favicon}”>
<meta name=“keywords” content=”” />
<meta name=“description” content=”” />
<style type=“text/css”>
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body
{
margin: 0;
padding: 0;
background-image:url(‘http://imgur.com/61iK8.jpg’);
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333333;
}

form {
margin: 0;
padding: 0;
}

img {
border: none;
}

input, textarea {
font: bold 1.2em Arial, Helvetica, sans-serif;
color: #333333;
}

h1, h2, h3 {
margin: 0;
font-weight: normal;
color: #200000;
}

h1 {
letter-spacing: -1px;
font-size: 2.6em;
}
h1 a {
color: #200000;
}

h1 a:hover {
color: #c00040;
}

h2 {
font-size: 1.8em;
}

h2 a {
text-decoration: none;
color: #40a0f0;
}

h2 a:hover {
text-decoration: none;
color: #c0e0a0;
}

h3 {
font-size: 2em;
font-weight: normal;
color: #200000;
}

p, ul, ol {
margin-bottom: 1.6em;
line-height: 180%;
}

a {
text-decoration: none;
font-size: 1.1em;
color: #40a0f0;
}

a:hover {
text-decoration: none;
color: #c0e0a0;
}

hr {
display: none;
}

bunnygirl50665's avatar

Should I delete this part of it?
}

form {
margin: 0;
padding: 0;
}

bunnygirl50665's avatar

YES! I figured it out. Thanks for the help! It was a pretty idiotic mistake, I had accidentally put quotation marks around the link. whoops!

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