/    Sign up×
Community /Pin to ProfileBookmark

Linking header image to home page

I want link header image back to the home page (index.php), so when user click on header image this bring back to the homepage.
Problem is that header image is called from a CSS file, and there’s no hyperlink: [URL=”http://ppukltd.com/”]example[/URL]

I find some tips, [URL=”http://docs.joomla.org/Creating_clickable_background_images_using_CSS”]Creating_clickable_background_images_using_CSS[/URL], but dont know how to implement this for this template and what is correct way to do it.

Here is header CSS:

#header {
float: left;
width: 802px;
height: 127px;
background: url(../images/header.jpg) no-repeat;
}

Here is part of index.php that call header:

<div id=”header”>
&nbsp;
</div>

to post a comment
CSS

5 Comments(s)

Copy linkTweet thisAlerts:
@Major_PayneNov 12.2008 — This is ONE way:

[CODE] span#header { display: block; width: 169px; height: 51px; padding: 2px; margin: 0 auto; background-image: url(header_image.jpg); border: 2px solid #070; text-align: center;"}[/CODE]

[CODE]<div><a href="http://YourSite.com/" title="Mouseover Description"><span id="header">&nbsp;</span></a></div>[/CODE]

Play with it until it fits your needs. Got another one if necessary.
Copy linkTweet thisAlerts:
@TaurusauthorNov 12.2008 — what mean width: 169px; height: 51px; in your css code? Is this cliackable area?

span#header {

display: block;

width: 169px;

height: 51px;

padding: 2px;

margin: 0 auto;

background-image: url(header_image.jpg);

border: 2px solid #070;

text-align: center;

}
Copy linkTweet thisAlerts:
@Major_PayneNov 12.2008 — Yes. That is the image size I had originally used in my example code. Forgot to change it to generic width: XXpx; height: YYpx; which is going to be the size of your header.
Copy linkTweet thisAlerts:
@TaurusauthorNov 12.2008 — Your version works for me, though there is some problems: i can set clickable area for whole header only(since i need specify the width/heigh of header in css), for some reason code creates border around header, which I was unable to remove even after I set border:0px; also, it colored header area in gray color in IE, if Firefox - not(i used image on transparent background). It seems there is no needs for url in div:

<div><a href="/" title="Nav: Home"><span id="header">&nbsp;</span>/a></div>

I currently use version with transparent GIF image in anchor tags, it works ok.


[CODE]<div id="header">
<a href="/"><img src="/images/transparent.gif" id="home-link" alt="Nav: Home" /></a>
</div>[/CODE]

[CODE]
#header {
position: relative;
width: 800px;
height: 127px;
background: url(../images/header.png) no-repeat;
}

#home-link {
position: absolute;
width: 400px;
height: 127px;
top: 0; left: 0;
border: 0;
float: left;
}
[/CODE]

I tried also vers. as per Example 2, but it not worked for me.
Copy linkTweet thisAlerts:
@TaurusauthorNov 13.2008 — update: I figured out what the problem is, adjusted one line and now method 2 works for me Example 2

html
[CODE]<div id="header">
<a href="/" id="home-link" title="back home"></a>
</div>[/CODE]

css
[CODE]
#header {
position: relative;
width: 800px;
height: 127px;
background: url(../images/header.png) no-repeat;
}

#home-link {
position: absolute;
display: inline-block;
width: 400px;
height: 127px;
top: 0; left: 0;
border: 0;
float: left;
}[/CODE]


it not worked because #home-link CSS had [COLOR="DarkSlateBlue"]"visibility: hidden;"[/COLOR] property which prevented code to work. I dont know what is the purpose of this property. Anyone have an idea? Also, I removed 'Home' from anchor tags, so anchors is empty now<a href=..></a> (since I dont want show this text on logo). Is the empty anchor elements valid html syntax?
×

Success!

Help @Taurus spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.6,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...