WordPress.org

Ready to get started?Download WordPress

Forums

replace blog title with image? (4 posts)

  1. roderashe
    Member
    Posted 6 years ago #

    Hi! How can I replace my blog title with an image or logo? I'm using the seashore theme. Here is my blog: http://www.bretography.com/

    I'm a css noob but willing to learn. I've been going through the tutorials but haven't found this answer yet. Thanks!

  2. Len
    Member
    Posted 6 years ago #

    I see a new header image on your blog so I assume you have this figured out?

  3. jberghem
    Member
    Posted 6 years ago #

    If I understand correctly you're not talking about the header image but the title and description text, which you want to replace with a graphic text.

    There are several ways of going about this. I'll share 2.

    A very common technique is image replacement. In short, you put the header in a div and give it the dimensions of your image. You then set the image as the background of the div and give the h1 heading in the div a negative text indent of -9999px
    In your case the CSS would look something like this:

    div#logo { background: url(path/image.jpg) no-repeat;
                width: 800px;
                height: 100px;}
    #logo h1  { text-indent: -9999px; }

    The only drawback to this technique is that when the images are not loaded or are disabled in the browser the CSS will still send the h1 off the left side of your screen and the visitor won't be able to read it.

    Since you're replacing the text with a graphic text anyway, why not replace the actual text with a graphic in your (X)HTML. Just place the image file within the h1 header element and ad the text in the alt attribute. This way, should the image fail to load or be disabled, the image will be replaced by the alt text and, being within h1 tags, the text will be rendered as an h1 heading. Well... unless you view it in Internet Explorer.

    A combination of these two is also possible. You can put a printer friendly graphic within the h1 element and replace it with a nicer looking graphic for on screen using the CSS. The alt attribute still comes to the rescue when images fail or are disabled

    All this info can be found in more detail on "A List Apart" (not my site)
    I am working on a site where I show tricks like these and promote web standards. My site is VanBerghem.com

    Hope this helps

  4. roderashe
    Member
    Posted 6 years ago #

    Thanks jberghem!

Topic Closed

This topic has been closed to new replies.

About this Topic