WordPress.org

1. dhoa
   Member
   Posted 2 years 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><!-- #header-->
   <div id="header">
   <?php thematic_header() ?>
   </div><!-- #header-->
   
   <?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.

2. Rev. Voodoo
   Volunteer Moderator
   Posted 2 years 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

3. dhoa
   Member
   Posted 2 years ago #

   Thanks RV, I tried that but to no avail...

4. clayj
   Member
   Posted 2 years 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);
   }

5. alchymyth
   The Sweeper
   Posted 2 years 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

6. Ian Stewart
   Theme Wrangler
   Posted 2 years 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.

7. dhoa
   Member
   Posted 2 years 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.

8. dhoa
   Member
   Posted 2 years ago #

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

9. pavkey88
   Member
   Posted 2 years 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

10. dhoa
    Member
    Posted 2 years 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.

11. danieliser
    Member
    Posted 1 year 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;
    }

Topic Closed

This topic has been closed to new replies.