Making a Background Img Clickable in CSS


	Making a Background Img Clickable in CSS

phatmommy

8-7-2008 7:15 AM

1031 views

tags:

web design, css

Add a Comment

Login to Comment. Not a member yet? Sign up

Today's Top Clips

visit the Top Clips page

View the Top Clips from August 7, 2008

Embed This Clip In Your Site...

<div style="margin: 12px 0px; font-family: arial; color: #333333; background: #ffffff; border: solid 4px #e5e5e5; width: 100%; clear: left;"><div class="CM_CTB_Content_Wrap" style="margin: 0px; padding: 0px;background-color: #ffffff;"><div style="border-bottom: solid 1px #dcdcdc; white-space: nowrap; margin-bottom: 8px; background-color: #eeeeee ;background-image: url(http://www.clipmarks.com/images/source-bg.gif); background-repeat: repeat-x; height: 24px; line-height: 24px; vertical-align: middle; padding-bottom: 4px; color: #666666; font-size: 10px;" ><a href="http://clipmarks.com/clip-to-blog/" title="see clips that are hot right now"><img src="http://content.clipmarks.com/blog_embed/3a57c586-859d-445c-931e-14909e2d4f9c/CCDB8FBA-22CE-4142-8D3F-1D805153D528/" alt="" width="19" height="19" border="0" style="vertical-align: middle; margin: 0px 4px; display: inline; border: none; float:none;" /></a>clipped from <a title="http://www.attackr.com/css-trick-turning-a-background-image-into-a-clickable-link/" href="http://www.attackr.com/css-trick-turning-a-background-image-into-a-clickable-link/" style="font-size: 11px;">www.attackr.com</a></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.attackr.com/css-trick-turning-a-background-image-into-a-clickable-link/">It’s simple to turn a regular image into a clickable link, but in some situations, it’s just not possible to use a regular image - so how do you turn a background image into a clickable link?</blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.attackr.com/css-trick-turning-a-background-image-into-a-clickable-link/"><P>So, how can we make our background image a clickable link? It turns out it can be done with a clever CSS trick.  All we have to do is add the link markup between our header div tags, and apply the above markup to the link instead.  All we have to add to the CSS is <EM>display: block</EM> to force the link to fill the entire space.</P></blockquote></div><div style="margin: 0px 6px 6px 4px;"><table style="font-size: 11px;border-spacing: 0px;padding: 0px;" cellpadding="0" cellspacing="0" width="100%"><tr><td style="background:transparent;border-width:0px;padding:0px;">&nbsp;</td><td align="right" style="background:transparent;border-width:0px;padding:0px;width:107px" width="107"><a href="http://clipmarks.com/share/CCDB8FBA-22CE-4142-8D3F-1D805153D528/blog/" title="blog or email this clip"><img src="http://content8.clipmarks.com/images/c2b-foot.png" border="0" alt="blog it" width="107" height="17" style="border-width:0px;padding:0px;margin:0px;" /></a></td></tr></table></div></div>

Clipmarks: Home; New Clips; Top Clips; Dashboard

Popular Topics: News; Life; Science; Technology; Entertainment

Get Started: Sign Up; Install Clipping Tool; How Clipping Works; Clip-to-Blog™; ClipSearch

Tools and Resources: FAQ; ClipWeek; Top Clippers; Top Tags; Site Map

About Clipmarks: About Us; Contact; Blog; Copyright; Privacy; EULA

Search Options

Today's Top Clips