Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Can I add link to background image in CSS ? 3

Status
Not open for further replies.
electronicmonkey

electronicmonkey

Technical User
Feb 19, 2007
45
GB
Hi;
I am having a headache trying to figure this out. If I can, please tell me how . My present background image code :

background:#666666 url("image url") no-repeat right;

 
Sort by date Sort by votes
I mean to add hyperlink to the image so that it goes to another URL when clicked

 
Upvote 0 Downvote
Hi

You can not add any functionality to a background image itself. But you can add it to the element which has the it as background. But certainly not with CSS.

Feherke.
 
Upvote 0 Downvote
My idea is just to give the <body> tag an onclick that will use Javascript to redirect to the page you want. You will have to use .cancelBubble on anything that already has an onclick on it, because it will try to perform both onclick actions.

[monkey][snake] <.
 
Upvote 0 Downvote
Thanks I am not sure these will work for me. The situation is that I have a page element (let's say right column). The right column has an header row which I have assigned a background image through CSS. However I need this header image to be clickable.

 
Upvote 0 Downvote
If the header is a link, you can use display:block making the whole 'block' clickable (technically not the image, but the point is moot).
A working example:
Code: 
#nav h3 a {
	[b]display: block;[/b]
	width: 95%;
        background:#666666 url("image url") no-repeat right; }

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
Thanks; I think I will probably need to introduce a table into the html then; I wanted to avoid that

 
Upvote 0 Downvote
...I think I will probably need to introduce a table into the html then;
Click to expand...
Not neccessarily. What html structure/element are you using now for what you are calling your header row?

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
The situation is that I have a page element (let's say right column). The right column has an header row which I have assigned a background image through CSS. However I need this header image to be clickable.
Click to expand...

There are a few ways to go about this.

1. Like traingamer stated above, put an anchor inside the header and make the anchor display:block

Code: 
<h3><a href="whereever.com">Header Text</a></h3>

In this code assign the height and width of the anchor with CSS style the font how you want.

Put the background image in the header element, then the entire block of the header will become a link.

2. You can make the anchor itself a psuedo-header.

Code: 
<a href="whereever.com">Header Text</a>
In this case the only difference from #1 is that you put the background image on the anchor, since you won't be using a header object.

3. Use javascript to put an onclick on the header object. I'm assuming you don't want this though, since it can be disabled.


[monkey][snake] <.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
519
3esolar
3
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
984
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
542
pmonett
pmonett
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
581
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller

Part and Inventory Search

Sponsor

Back
Top