Linked Header Background Image with Titan Theme

  • Author
    Posts
  • #652808

    chrisfritz
    Member

    I know there are other forum threads on making a background image linkable, but none of those solutions seem to work for me (odds are I’m just doing something stupid). I just want clicking on the header image to go to the main page. If anyone could help, I would be very grateful: http://poweronlansing.com

    The blog I need help with is poweronlansing.com.

    #652928

    The only way to do this is to create a transparent gif or PNG with no background color that is the same size as your header image and then you put it into a text widget, set the height and width of that specific widget to the same as the header image and then use positioning in the CSS to move that widget up and over the top of the header image.

    #652988

    chrisfritz
    Member

    That’s similar to one of the strategies I’ve tried, using code like this:

    HTML:

    <div class="header">

    </div>

    CSS

    #headerimg {
    position: absolute;
    top: 35px;
    left: 473px;
    width: 467px;
    height: 105px;
    background-color: transparent;
    border: 1px solid yellow;
    }

    The problem that I run into with that method is the absolute positioning is messed up if a WordPress user is logged in (and no matter what I do, it’s always messed up in IE9). Any ideas?

    #652990

    chrisfritz
    Member

    Ok, the HTML didn’t show up quite right. Let’s try that again.

    <div class="header">
    (<)a id="headerimg" href="http://poweronlansing.com/"(>)(<)/a(>)
    </div>

    Parentheses above not included.

    #653094

    chrisfritz
    Member

    Is there a problem with the way I’m trying to implement this? Or another solution that doesn’t involve using a background image?

    I’d really like to get that darn header image clickable! Many thanks in advance to anyone who might have a solution or idea to offer. :-)

The topic ‘Linked Header Background Image with Titan Theme’ is closed to new replies.