General Question

kirlywurly's avatar

Tumblr: how do I add an image as a header?

Asked by kirlywurly (2 points ) July 30th, 2008

Right.. Ive created a collage in photoshop that Ive already saved in jpeg and uploaded it on flickr (so it has its own URL) but I want to put it onto my tumblr blog, I still want to keep the title text but I want the image to appear underneath it and stay there. I want the rest of the theme to stay the same. Hope someone can help?!?

Observing members: 0 Composing members: 0

19 Answers

astrofoo's avatar

make sure that it will fit properly otherwise it will look like crap.

go to customize, advanced and look for “add custom css” and add this:

#container {
background: #fff url(http://farm1.static.flickr.com/154/380173157_dd6a416379_b.jpg) no-repeat;
}

Replace the url with the proper url and change the fff (white) to whatever color you want. the no-repeat makes it not title across and down. if you want it to title across change it to repeat-x. and repeat-y makes it title down.

kirlywurly's avatar

Thank you for your advice, when I copy your text and when I copy it with the replaced URL, nothing at all happens to the appearance of my blog.

astrofoo's avatar

What theme do you use? The css is probably different for each theme. For the theme Fold (the one I use) that would be the proper way to do it.

like if you are using minimalist you would use use this:

#content {
background: #fff url(http://farm1.static.flickr.com/154/380173157_dd6a416379_b.jpg) no-repeat;
}

Also make sure you are using the actual jpeg image url and not just the original size page url.

kirlywurly's avatar

Im using fold too. Think maybe I was putting in the original size page URL. how do you get to find the actual image jpeg URL?

cheers

astrofoo's avatar

click on all sizes, get to the “original” size. control-click or right-click on the image. depending on what OS and browser you are using it will be worded differently but look for something along the lines of “copy image address” (as it’s called in safari).

Now the link directly to the image in copied and ready for you to paste somewhere.

Are you able to get the example to work before you change the url?

kirlywurly's avatar

YAY!! its now working, I did get the example working too. Just one small problem though its slightly to narrow for the blog width, do you know what the correct pixel width needs to be for “form” and “minimalist”?

kirlywurly's avatar

sorry the pixel width and the length?

AlexZandi's avatar

How do you get this to work with the LiteWire theme? the default one.

MrBlogger's avatar

Anyone got any ideas about LiteWire theme?

Jam_Jar's avatar

I need help too. I’m using the twilight theme and I need to insert a logo.
this is the part I think I need to insert it:
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”/>
<title>{Title}{block:PostSummary} – {PostSummary}{/block:PostSummary}</title>
<link rel=“icon” href=”{Favicon}”/>
<link rel=“alternate” type=“application/rss+xml” title=“RSS” href=”{RSS}”/>
<meta name=“viewport” content=“width=950”/> <!—iPhone—>

can anyone help?

Jam_Jar's avatar

or would it be here?
body {
color: {color:Text};
margin: 0px;
background: {color:Background} url(‘http://fc37.deviantart.com/fs32/f/2008/228/b/a/Wooden_Clouds__Wallpaper_Tile__by_start_static.jpg’);
background-repeat:
repeat;
background-attachment: fixed;
font-family: ‘Lucida Grande’, Helvetica, sans-serif;
}

#content {
width: 510px;
margin: auto;
padding: 35px;
color: #000000;
position: relative;
background: #FFFFFF
url(‘http://i289.photobucket.com/albums/ll231/conanpix/26c107d1.png’);
background-repeat: repeat-x;
border-left: solid 10px {color:Content Border};
border-right: solid 10px {color:Content Border};
}

a {
color: #46a6e9;
}

yodamaycry's avatar

After trying several options, I was able to get my image header to appear by inserting an <img src> in the HTML section and slightly adjusting the H1 setting in CSS…

first of all, the html

</head>
<body>
<h1>
<a href=”/”>{title}</a>
<a href=”{RSS}”><img src=”/themes/5/rss.gif” id=“rss” alt=“RSS”/></a>
</h1>

This first AHREF is the link for your title to take you to your main page. Instead of linking the word title, replace the {title} with your <img src=”filelocation”> html code. This way your picture will be linked with your tumblr main page so that if someone is viewing a single post they can easily get to your main tumblr.

next, the CSS

Find the section near the top defining the Header 1, or h1, attributes in the CSS . I changed as much I as needed to so that the title letters were not still seen on my pic. This means making the font tiny, like 1px, using no padding, and moving it’s location left -1000px. Then I matched the font color with the background to make it disappear.

<style>
h1 {
width: 800px;
padding: 0px 0px 0px 0px;
margin: 50px auto 40px auto;

text-align: left -1000px;
font: Bold 1px ‘Trebuchet MS’, Helvetica, sans-serif;
letter-spacing: -2px;
line-height: 5px;
position: relative;

}

h1 a {
color: #ffffff; (whatever matches your background)
text-decoration: none;
}

h1 img {
border-width: 0px;
position: relative;
right: 0px;
bottom: 10px;
width: 800px; (make sure to make this big enough for your pic)
height: 550px;(make sure to make this big enough for your pic)
}

Be sure that in the h1 img section, allow enough pixels for your img to show up fully.

So I hope this helps someone. I’m not very good with CSS and I’m intermediate at best with HTML, so if you find an easier work-around, please post it so I can clean my page up even more.

Just remember each theme is a little different, and this worked on the custom theme I downloaded from the web. If nothing else this may give you some ideas toward finding a solution to your page.

ilosthebet's avatar

I can’t do any of this! I want to be able to show who I am following and have my picture on my page but I can’t! www.kailamarie.tumblr.com Someone help!

Lurr's avatar

I have a question ! I am using a Springfield theme on my tumblr .. I have also an uploaded photo but nothings appear. http://Luurr.tumblr.com. That’s my tumblr. If you will see my blog site NO PHOTO appears BUT I’ve already uploaded one. What will I do to have my photo on my tumblr?

Coltonbuttnaked's avatar

I use the 101 theme on Tumblr. How do I put a slide show? Any help is appreciated.

Skyeangel's avatar

So I also need help with this too. Whenever I try to add something on it doesnt appear at all…. Its just blank. here is my link : www.justbime.tumblr.com As you can see There is nothing but my kingdom Hearts background. Im kinda confused. Can anyone help me? Here is what the HTML code says for far

<html
<head>
<!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>

<!—DEFAULT VARIABLES—>
<meta name=“color:Background” content=”#3b627e” />

<meta name=“font:Title” content=“Arial” />
<meta name=“font:Body” content=“Arial” />
<meta name=“font:Accent” content=“Lucida Sans” />

<meta name=“if:Don’tShow People I Follow” content=“1” />
<meta name=“if:Show Tags” content=“1” />
<meta name=“if:Show Album Art on Audio Posts” content=“1” />
<meta name=“if:Enable Jump Pagination” content=“0” />

<meta name=“text:Disqus Shortname” content=”” />

<meta name=“image:Header” content=”” />
<meta name=“image:Background” content=”” />

<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<title>{Title}{block:SearchPage}, {lang:Search results for SearchQuery}{/block:SearchPage}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
{block:Description}<meta name=“description” content=”{MetaDescription}” />{/block:Description}
<link rel=“shortcut icon” href=”{Favicon}” />
<link rel=“apple-touch-icon” href=”{PortraitURL-128}”/>
<link rel=“alternate” type=“application/rss+xml” href=”{RSS}” />
<style type=“text/css”>
body {
background: {color:Background} url(’{image:Background}’) top left fixed repeat;
margin: 0;
padding: 0;
font-family: {font:Body};
}

.clear {
clear: both;
height: 0px;
overflow: hidden;
}

a img {
border: #545565;
}

#wrapper {
width: 845px;
margin: 0 auto;
}

#wrapper #title {
margin: 30px 0;
color: #0000FF;
font-size: 50px;
font-weight: bold;
font-family: {font:Title};
text-shadow: 1px 3px 5px rgba(0,0,0, 0.5);
letter-spacing: -1px;
}

#wrapper #title a {
color: #fff;
text-decoration: none;
}

#wrapper #content {
width: 520px;
float: left;
}

#wrapper #content .post {
font-family: {font:Body};
background: #fff;
padding: 10px;
position: relative;
}

#wrapper #content .post .media {
text-align: center;
margin-bottom: 10px;
}

#wrapper #content .post .quotebg {
font-family: georgia, serif;
font-size: 150px;
color: {color:Background};
opacity: 0.2;
filter: alpha(opacity=20);
-ms-filter:“progid:DXImageTransform.Microsoft.Alpha(Opacity=20)”;
position: absolute;
top: 70px;
left: 10px;
}

#wrapper #content .post .quote {
color: {color:Background};
font-weight: bold;
padding: 20px 20px 5px 20px;
}

#wrapper #content .post .quote.short {
font-size: 33px;
line-height: 35px;
}

#wrapper #content .post .quote.medium {
font-size: 25px;
line-height: 28px;
}

#wrapper #content .post .quote.long {
font-size: 18px;
line-height: 22px;
}

#wrapper #content .post .quote_source *:first-child {
margin-top: 0px;
}

#wrapper #content .post .quote_source *:last-child {
margin-bottom: 0px;
}

#wrapper #content .post .quote *:first-child {
margin-top: 0px;
}

#wrapper #content .post .quote *:last-child {
margin-bottom: 0px;
}

#wrapper #content .post .copy {
color: #6e7173;
padding: 10px;
font-size: 13px;
line-height: 15px;
}

#wrapper #content .post .copy a {
color: #6e7173;
text-decoration: underline;
}

#wrapper #content .post .copy p {
margin: 10px 0 0 0;
padding: 0;
}

#wrapper #content .post .copy pre {
margin: 10px 0px 10px 0px;
padding: 10px;
background-color: #e6e6e6;
font: normal 11px Courier, monospace;
overflow: auto;
}

#wrapper #content .post .copy > p:first-child {
margin-top: 0;
}

#wrapper #content .post .copy img {
max-width: 100%;
}

#wrapper #content .post .audio {
background: #eaeaea;
float: left;
padding: 7px;
margin-bottom: 10px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

#wrapper #content .post .audio .player {
float: left;
}

#wrapper #content .post .audio .player .audio_player embed {
border: 1px solid #c8c8c8;
}

#wrapper #content .post .audio .meta {
padding: 8px 13px;
height: 13px;
float: left;
color: #666;
font-family: {font:Accent};
font-size: 11px;
text-transform: lowercase;
}

#wrapper #content .post .audio .meta a {
color: #666;
text-decoration: none;
}

#wrapper #content .post .album_art {
text-align: center;
}

#wrapper #content .post .question {
color: #494949;
font-size: 16px;
font-weight: bold;
background: #f1f1f1;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
margin: 0 0 15px 0;
padding: 15px 20px;
position: relative;
}

#wrapper #content .post .question .nipple {
width: 13px;
height: 7px;
background: #f1f1f1 url(‘http://assets.tumblr.com/themes/redux/ask-mask.png’);
position: absolute;
bottom: -7px;
left: 30px;
}

#wrapper #content .post .asker_container {
margin: 0 0 20px 24px;
}

#wrapper #content .post .asker_container img {
margin: 0 12px -7px 0;
}

#wrapper #content .post .asker_container a.asker {
color: {color:Body};
}

#wrapper #content .post .title {
color: #494949;
font-size: 16px;
font-weight: bold;
padding: 10px 10px 0 10px;
}

#wrapper #content .post img {
max-width: 500px;
}

#wrapper #content .post .chat {
background-color: #fff;
border-left: 5px solid #dedddd;
margin: 10px 10px 0 10px;
font-size: 14px;
}

#wrapper #content .post .chat .lines {
margin-left: 1px;
}

#wrapper #content .post .chat .lines .line {
background-color: #eaeaea;
color: #494949;
margin-bottom: 1px;
padding: 3px 5px;
}

#wrapper #content .post .chat .lines .line.even {
background-color: #dedddd;
}

#wrapper #content .post .link {
margin: 4px 0 2px 0;
font-size: 16px;
line-height: 25px;
}

#wrapper #content .post .link a {
background-color: {color:Background};
color: #fff;
padding: 5px 7px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

#wrapper #content .post .link a:hover {
opacity: 0.9;
filter: alpha(opacity=90);
-ms-filter:“progid:DXImageTransform.Microsoft.Alpha(Opacity=90)”;
}

#wrapper #content .post .footer {
background: #eaeaea;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
font-family: {font:Accent};
font-size: 11px;
color: #666;
padding: 5px 10px;
margin-top: 10px;
}

#wrapper #content .post .footer.for_permalink:hover {
opacity: 0.9;
filter: alpha(opacity=90);
-ms-filter:“progid:DXImageTransform.Microsoft.Alpha(Opacity=90)”;
}

#wrapper #content .post .footer .date {
width: 67%;
float: left;
color: #666;
}

#wrapper #content .post .footer .notes {
width: 33%;
float: right;
text-align: right;
color: #666;
}

#wrapper #content .post .footer .notes a {
color: #666;
}

#wrapper #content .post .footer .tags a {
color: #4a4a51;
text-decoration: underline;
}

#wrapper #content .post .footer .tags .tag-commas:last-child {
display: none;
}

#wrapper #content .post .footer.with_source_url .tags {
max-width: 330px;
float: left;
}

#wrapper #content .post .footer.with_source_url .source_url {
float: right;
max-width: 160px;
overflow: hidden;
white-space: nowrap;

}

#wrapper #content .post .footer.with_source_url .source_url img {
vertical-align: top;
-moz-opacity: 0.5;
opacity: 0.5;
}

#wrapper #content .post .footer.with_source_url .source_url:hover img {
-moz-opacity: 0.7;
opacity: 0.7;
}

#wrapper #content .post a {
color: #6e7173;
text-decoration: none;
}

#wrapper #content .post .copy blockquote {
margin: 10px 0px 10px 10px;
padding-left: 15px;
border-left: solid 4px #dcdcdc;
}

#wrapper #content .post .copy blockquote blockquote {
border-left: solid 4px #cccccc;
}

#wrapper #content .post .copy blockquote blockquote blockquote {
border-left: solid 4px #bcbcbc;
}

#wrapper #content .post .copy blockquote blockquote blockquote blockquote {
border-left: solid 4px #acacac;
}

#wrapper #content .post .copy blockquote blockquote blockquote blockquote blockquote {
border-left: solid 4px #9c9c9c;
}

#wrapper #content .post .copy blockquote blockquote blockquote blockquote blockquote blockquote {
border-left: solid 4px #8c8c8c;
}

#wrapper #content .bottom {
background: url(‘http://assets.tumblr.com/themes/redux/shadow-post.png’) top center no-repeat transparent;
width: 513px;
height: 40px;
margin: 0 auto;
}

#wrapper #content #navigation {
text-align: right;
padding-bottom: 35px;
text-transform: lowercase;
}

#wrapper #content #navigation a {
background-color: #fff;
color: {color:Background};
padding: 5px 10px;
text-decoration: none;
margin-left: 25px;
}

#wrapper #content #navigation a:hover {
opacity: 0.9;
filter: alpha(opacity=90);
-ms-filter:“progid:DXImageTransform.Microsoft.Alpha(Opacity=90)”;
}

#wrapper #content #navigation.jump_pagination {}

#wrapper #content #navigation.jump_pagination a {
margin: 0 0 0 4px;
}

#wrapper #content #navigation.jump_pagination .current_page {
color: #fff;
background-color: rgba(255,255,255, 0.1);
border: 2px solid #fff;
padding: 3px 8px;
margin: 0 0 0 4px;
cursor: default;
}

#wrapper #content #navigation.jump_pagination .jump_page {}

#wrapper #content .post .notecontainer {
background: #eaeaea;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
font-family: {font:Accent};
font-size: 11px;
color: #666;
margin-top: 10px;
margin-bottom: -10px;
}

#wrapper #content .post .notecontainer a {
color: #666;
text-decoration: underline;
}

#wrapper #content .post .notecontainer ol.notes {
padding: 0px 0 10px 0;
list-style-type: none;
font-size: 11px;
}

#wrapper #content .post .notecontainer ol.notes li.note {
padding: 10px 10px 0 10px;
}

#wrapper #content .post .notecontainer ol.notes li.note img.avatar {
vertical-align: -4px;
margin-right: 10px;
width: 16px;
height: 16px;
}

#wrapper #content .post .notecontainer ol.notes li.note span.action {
font-weight: normal;
}

#wrapper #content .post .notecontainer ol.notes li.note .answer_content {
font-weight: normal;
}

#wrapper #content .post .notecontainer ol.notes li.note blockquote {
border-left: 2px solid #666;
padding: 4px 10px;
margin: 10px 0px 0px 25px;
}

#wrapper #content .post .notecontainer ol.notes li.note blockquote a {
text-decoration: none;
}

#wrapper #content #searchresults {
color: #fff;
margin: 0 0 15px 0;
text-shadow: 1px 3px 5px rgba(0,0,0, 0.5);
font-family: {font:Body};
font-size: 20px;
}

#wrapper #content #searchresults .search_query {
font-weight: bold;
}

#wrapper #content #searchresults .search_query:before {
content:’“’;
}

#wrapper #content #searchresults .search_query:after {
content:’”’;
}

#wrapper #sidebar {
width: 250px;
float: right;
color: {color:Background};
font-family: {font:Accent}
}

#wrapper #sidebar a {
color: {color:Background};
}

#wrapper #sidebar #top {
background: #fff;
padding: 0 20px;

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

#wrapper #sidebar #top #avatar {
width: 146px;
height: 146px;
padding: 8px 0 0 9px;
background: url(‘http://assets.tumblr.com/themes/redux/avatar-bg.png’) top left no-repeat transparent;
position: relative;
top: -24px;
left: -5px;
}

#wrapper #sidebar #top #pages {
margin-bottom: 15px;
font-size: 12px;
}

#wrapper #sidebar #top #pages.ask_and_submit {
display: none;
{block:AskEnabled}display: block;{/block:AskEnabled}
{block:SubmissionsEnabled}display: block;{/block:SubmissionsEnabled}
}

#wrapper #sidebar #top #pages a.page {
display: block;
float: left;
background-color: {color:Background};
color: #fff;
padding: 4px 5px;
margin: 0 5px 5px 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

#wrapper #sidebar #top #pages a.page:last-child {
margin-right: 0;
}

#wrapper #sidebar #top #pages a.page:hover {
opacity: 0.9;
filter: alpha(opacity=90);
-ms-filter:“progid:DXImageTransform.Microsoft.Alpha(Opacity=90)”;
}

#wrapper #sidebar #top #description {
font-size: 11px;
position: relative;
top: -18px;
}

#wrapper #sidebar #top #description a {
color: {color:Background};
text-decoration: underline;
}

#wrapper #sidebar #top #search {
background: #fff;
border: 1px solid {color:Background};

-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

#wrapper #sidebar #top #search-scope {
padding-top: 5px;
font-size: 11px;
text-align: center;
}

#wrapper #sidebar #top #search-scope input,
#wrapper #sidebar #top #search-scope label {
cursor: pointer;
}

#wrapper #sidebar #top #search form {
margin: 0;
}

#wrapper #sidebar #top #search form .query {
padding: 5px;
border: none;
background: transparent;
outline: none;
width: 125px;
float: left;
color: {color:Background};
}

#wrapper #sidebar #top #search form .submit {
background: {color:Background};
color: #fff;
border: none;
padding: 5px 7px;
margin: 3px 3px 2px 0;
float: right;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
}

#wrapper #sidebar #top #search form .submit:hover {
opacity: 0.9;
filter: alpha(opacity=90);
-ms-filter:“progid:DXImageTransform.Microsoft.Alpha(Opacity=90)”;

Im really nubby at this whole thing can anyone help me with this??

lovebrittney's avatar

Hi, I have the Clear theme by Parti and I’m having a LOT of trouble trying to replace my header with an image. HELP! please :)

niyiadefabi's avatar

Hi all,

Here is a simple way to go about it.

1. Go to your dashboard http://www.tumblr.com/dashboard
2. Click on photo
3. Browse for the image you want to upload
4. Set the publish option to private (top right corner)
5. Refresh your dashboard to see the private photo you just uploaded
6. You can click another page and then click the dashboard to refresh the page
7. Right click on the image you just uploaded
8. Click the properties option
9. You will see Address(URL) it will start with http://….. eg. see the url of the one i used for this test. http://26.media.tumblr.com/tumblr_li7ux61yve1qi6kdno1_100.jpg
10. copy this URL to the URL section of your html code
11. eg. locate where you want it to be on your page, and enter this code, replace the URL with your own ie. replace from http://…... to .png<img src=“http://28.media.tumblr.com/tumblr_li7u72QBu11qi6kdno1_100.png” alt=“insert anything here” />
12. Refresh your home page
13. Enjoy the easy way.

Response moderated (Writing Standards)

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