/    Sign up×
Community /Pin to ProfileBookmark

css background image link

Hi Guys

I’m stuck on trying to create a link. Is it possible to have a CSS backround image link to a website. I have a background image in a table and i can’t seem to figure out how to link it to a website. is it possible to do in CSS?. if so how do you do it.

Thanks

to post a comment
CSS

5 Comments(s)

Copy linkTweet thisAlerts:
@gil_davisAug 08.2008 — CSS does not link anything, just changes the way it looks. A background-image is just scenery.

You can either create an anchor using HTML, or javascript to react to the onclick event for the table.
Copy linkTweet thisAlerts:
@FrankTheTankAug 08.2008 — You could style the <a> tag with display: block and stick one into the table cell, which will make it span the width of the cell... set the height to match the table cell, and your link will then fill the cell. Add in decoration: none and link a blank space... and boom, your whole cell links to the link, in an invisible kind of way.

Or, perhaps you could just link an image? Sounds like you're going to some fuss to link an image that could be done with less trouble.

Frank
Copy linkTweet thisAlerts:
@Major_PayneAug 09.2008 — Try:

[CODE] <style type="text/css">
#logolink {
display: block;
height: 100px;
width: 200px;
background-image: url(logo.jpg);
}

#bglink span { display: none; }
</style>[/CODE]


[CODE]<body>
<p><a id="logolink" href="http://whatever"></a></p>
</body>[/CODE]


The anchor tag is inline so make it a block in order

to hold a shape without inner content. The height and width are those of the image. Set to your own image size.

To make this work in a non-CSS user agent as well, you might want to add

something like this to the style tags: #bglink span { display: none; }

[CODE]<p><a id="bglink" href="#"><span>Click my logo</span></a></p>[/CODE]

If CSS isn't enabled, the text link replaces the image link.

Ron
Copy linkTweet thisAlerts:
@72newbieAug 10.2008 — This is exactly what I was looking for, but how do I make it where the links are horizontal, not vertical? I can get it to work in IE, but not firefox by dropping the display: block;

never mind ? inline-block;

? nope, that breaks in firefox for me?
Copy linkTweet thisAlerts:
@CentauriAug 10.2008 — Instead of display:block, use float:left
×

Success!

Help @khujo56 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.18,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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