Adding a header image to Thematic: Unsolved Mystery

Resolved dhoa
(@dhoa)

14 years, 4 months ago
Hey everyone,

Curious about an aspect of this. I made the blog title into an image on style.css:
```
#blog-title a {
background:url(http://www.aerismorpheme.com/wp-content/uploads/2009/12/banner.jpg) no-repeat top center;
display:block;
text-indent:-9000px;
width: 940px;
height: 275px;
position:relative;
z-index:10;
}
```
And it only shows the image on Safari.

And my header.php looks like this:
```
</div>
<div id="header">
<?php thematic_header() ?>
</div>

<?php thematic_belowheader(); ?>

<div id="main">
```
Do I have to alter anything in the php file? Again, it works fine in Safari. Should the image be sourced from somewhere else? Any help would be appreciated. Oh, the site is http://www.aerismorpheme.com.

Viewing 10 replies - 1 through 10 (of 10 total)

Rev. Voodoo
(@rvoodoo)

14 years, 4 months ago

well….why not put the banner.jpg into your actual theme’s folder?
It should have an images folder right?

background:url(http://www.aerismorpheme.com/wp-content/uploads/2009/12/banner.jpg) no-repeat top center;

could then be
background:url('images/banner.jpg') no-repeat top center;
Dunno if that would fix anything

your header.php file is calling to a thematic_header file I guess, which if the above doesn’t fix we may need to see

Thread Starter dhoa
(@dhoa)

14 years, 4 months ago

Thanks RV, I tried that but to no avail…

clayj
(@clayj)

14 years, 4 months ago

Are you committed to having the background image on “#blog_title a”?

I assigned a background image to the #header div on a thematic site, and it works great.

#header {
background-image: url(images/headerimage.jpg);
}

Michael
(@alchymyth)

14 years, 4 months ago

i dare say your image ‘banner.jpg’ is not where you think it is, or it is not an image.
if i use ‘folk-magic.jpg’ in the same line, it shows in the header.

please re-upload your banner.jpg and check double, that it is there and you can see it.
try to enter http://www.aerismorpheme.com/wp-content/uploads/2009/12/banner.jpg into the browser, and you will see that it does not show your image 😉

btw: i couldn’t see any header in safari/pc

Ian Stewart
(@iandstewart)

14 years, 4 months ago

Hey there. I recommend reading How To Modify WordPress Themes The Smart Way and looking through the The ThemeShaper Forums. There’s lots of info on how to easily do this—without editing any of the Thematic files.

Thread Starter dhoa
(@dhoa)

14 years, 4 months ago

@alchymyth: I see what you’re saying. And when I click on the URL http://www.aerismorpheme.com/wp-content/uploads/2009/12/banner.jpg I do see an image….(in Safari 4.0.4)
But when I load that link into, say, firefox, I just see the link text.
And @iandstewart–Ive gone through themeshaper, very good information…

When I go into the FTP files and show the URL of the banner image it shows this:
ftp://fishbowl42.com/wp-content/themes/thematic/images/banner.jpg
But when I load it into a browser, it’s a 404 Not found.

I’m so confused.

Thread Starter dhoa
(@dhoa)

14 years, 4 months ago

Does anyone have any ideas?….I’d be really grateful for any pointers.

pavkey88
(@pavkey88)

14 years, 3 months ago

dhoa –

Like alchymyth, I was able to pull an existing image that was already on your page and shove it into the header using firebug, but your ‘banner’ jpg doesn’t seem to be existent in the folder you’ve got it pointing to in the css file.

to prove it works, just plug this in the css file under your #blog-title element and REMOVE it from the ‘#blog-title a’ area.

background:transparent url(http://www.aerismorpheme.com/wp-content/uploads/2009/12/parad_pomeg.jpg) repeat scroll 0 0;

once you see that it works, just replace the parad_pomeg with whatever pic you want, and remove the ‘repeat scroll’ properties

the ONLY other thing I could think may be causing a problem is that you don’t have the image checked in with Dreamweaver (if you’re using dw for ftp) – depending on your settings and your server settings, it could be locked up and prevented from displaying. this has happened to me once before –

good luck

Thread Starter dhoa
(@dhoa)

14 years, 3 months ago

Thanks everyone for your input. I ended up getting another theme (thematic power blog, worth every penny) and the issue just sort of went away.
Daniel Iser
(@danieliser)

13 years, 6 months ago
Try this for your header image. Using text-indent:-9000; can get you penalized in google rankings, its best to not try and hide text anywhere outside the renderable window. This method keeps all of the Thematic SEO Goodness by adding a span with link to the header below the blog title and description. This span is sized to 100% of the header div and will appear layered over your header text. You can read about it here.

Here is the snippet

Add this to functions.php
```
// Add Header Image // Add Header Image
function thematic_logo_image() {
 echo '<a href="'.get_bloginfo('url').'" title="'.get_bloginfo('name').'" ><span id="header-image"></span></a>';
}
add_action('thematic_header','thematic_logo_image',6);
```
And this to styles.css
```
#branding {
 height: 187px; /* Change this to your images height */
 padding: 0;
 position:relative;
}
#header-image {
 background:url("images/header.jpg") no-repeat transparent; /* Change This to Your Image */
 height:100%;
 width:100%;
 position:absolute;
 cursor: pointer;
 top:0;
}
```