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

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.

astrofoo (197

)“Great Answer” (1

) Flag as…

¶

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.

kirlywurly (2

)“Great Answer” (0

) Flag as…

¶

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.

astrofoo (197

)“Great Answer” (1

) Flag as…

¶

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

kirlywurly (2

)“Great Answer” (0

) Flag as…

¶

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?

astrofoo (197

)“Great Answer” (0

) Flag as…

¶

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 (2

)“Great Answer” (0

) Flag as…

¶

sorry the pixel width and the length?

kirlywurly (2

)“Great Answer” (0

) Flag as…

¶

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

AlexZandi (25

)“Great Answer” (1

) Flag as…

¶

Anyone got any ideas about LiteWire theme?

MrBlogger (382

)“Great Answer” (0

) Flag as…

¶

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 (7

)“Great Answer” (0

) Flag as…

¶

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;
}

Jam_Jar (7

)“Great Answer” (0

) Flag as…

¶

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.

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.

yodamaycry (30

)“Great Answer” (1

) Flag as…

¶

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!

ilosthebet (1

)“Great Answer” (0

) Flag as…

¶

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?

Lurr (1

)“Great Answer” (0

) Flag as…

¶

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

Coltonbuttnaked (1

)“Great Answer” (0

) Flag as…

¶

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

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

.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??

Skyeangel (2

)“Great Answer” (0

) Flag as…

¶

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 :)

lovebrittney (1

)“Great Answer” (0

) Flag as…

¶

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.

niyiadefabi (1

)“Great Answer” (0

) Flag as…

¶

Response moderated (Writing Standards)

General Question

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

19 Answers

Answer this question

Login

Join

Live Preview

Already a member?

Join for Free!

Related

General Question

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

19 Answers

Answer this question

Login

Join

Live Preview

Already a member?

Join for Free!

Login

Not a member?

Related