How Do I Add A Header Image For A Dreamscape Theme in Tumblr?

Can you link to the page you’re trying to add the header to?

Usually there’s going to be some sort of header container defined in the markup (HTML) of your page, if you’d like to add an image easily to that you can either add an <img> tag within that container, or set the dimensions as you need them and use the background property in your css to show the header image that way.

If you’d like the header text to no longer appear, you can either remove it from the markup or use the text-indent property along with a large negative value (like -5000px) to remove it from the block. (assuming it’s a block element itself)

I hope that helps and good luck with the blog… if you have that link I’d be happy to get more specific with your theme.

The link to the blog is grillingwilson.tumblr.com

I’m not totally sure with where and how I would go about doing what you were describing (I’m still very beginner at this HTML/CSS stuff) so if anyone could check out the link and then give me some instructions that would be awesome

Sounds good, I think this is the easiest way to achieve what you’re looking for

in the HTML you’ll need to add an id to the h1 tag there… so the first few lines will look like

<div id=“content”>
<h1 id=“page_title”>
<a href=”/”>Untitled</a>
</h1>

So we’ve added the id=“page_title” which we’ll then use to identify that h1 in the css. In your css file now, you’ll want to add some additional rules for that heading, I would add these right below the #content rules you’ve added to keep your changes in one place…

#page_title {
height: {your image height in pixels}; for example this would read “height:300px;”
width: {your image width in pixels};
background: url(./url-to-your-image.jpg) center center no-repeat;
text-indent: -5000px; This will move the text, if you’re using an image instead
padding: 0;
margin: 0;
}

The padding rule may not be necessary (there’s no padding on the item) but should keep you solid for future changes.

It’s worth noting that the text inside the H1 should match whatever your image ‘says’ so it will make sense even when images aren’t available for whatever reason. So if this image says “My Big Bad Blog” then your h1 should read

<h1 id=“page_title”>
<a href=”/”>My Big Bad Blog</a>
</h1>

Also, if you don’t need that text to link anywhere, it would be best to eliminate the anchor tag all together… and just make it, this will just remove clutter and cause less confusion for visitors…

<h1 id=“page_title”>My Big Bad Blog</h1>

I hope that helps and let me know if you have any questions.

where do you add the first part?