Thread

I have a header image for each template on my website that is provisioned through the CSS file. I want to make the image a link back to the homepage. How is this best accomplished? I’ve tried doing it in the CSS file and in the template and neither option worked. Any help would be greatly appreciated.

Hi - not really sure what you mean here. Do you have an example of what you’ve tried?

I have my sites set up not to show the index.php, so to create a link to the home page is as simple as just popping in this:

<a href="/">home</a>

The site is here. I want to make the header a link back to the home page. The header is coded through the CSS file. Can I add some kind of link code to the CSS file to make the image a link? Or do I have to use some kind of code in each template to make the header a link?

When you say ‘the header’, which aspect of the header do you mean? For example, there’s a red logo at top right of the header that already does just that.

This doesn’t appear to be an ExpressionEngine site at the moment, is it going to be?

Oops. I posted the wrong URL. Sorry. Right one is http://www.collectiontechnology.net.

I want the blue banner at the top of the page to be a link to the homepage.

Ahha, that makes more sense 😊

The best way IMO would be to change it - I’d have the header as a tag exactly like the one I have above:

<a href="/">Click here to go home</a>

Then I’d whack in some CSS to change that link into your header image via CSS, so it downgrades nicely. The CSS you would need should be something similar to this:

#header_homelink,
#header_homelink a{width:1000px;height:93px;background"url(<a href="http://www.collectiontechnology.net/themes/site_themes/trendy_blue/CTnetHeader.jpg">http://www.collectiontechnology.net/themes/site_themes/trendy_blue/CTnetHeader.jpg</a>) no-repeat;text-indent:-5000px;}
#header_homelink a{display:block;}

So basically it changes your p tag into a big block the same size as the image, it applies your image as a background and hides the actual tag text. Then because <a> is a block within , the whole thing is clickable as a link! You might need some extra jiggery-pokery to get your right menu overlay to appear the same way though.

Hope that helps.

I’m a bit confused. The background image in the header does not seem to change throughout the site. But assuming it does or will at some point you could use a technically empty link (essentially what Andy pointed out above, sorry I actually wrote this all out in another tab before reading that completely! x_x)

E.g. place this immediately inside the blog-header div:

or something like that. I haven’t tested it in other browsers asides from FF2 so I don’t know if the text will hide or if you’ll get scrollbars. A similar concept could be employed, e.g. since it sits at the very top of the page you can push the text outside of the page: give it a height of let’s say 500px (arbitrary large value), a bottom padding of the size of the blog-header (93px), and either a negative top or negative margin-top of 500px (same size as height) and disregard playing with the font. That should do the trick.

Normally what I’d do though is just make a copy of the background graphic with the size I’d want the link to be (the logo) and just toss that in an absolutely positioned link.