Member Avatar for Samir

I've done some searches and haven't come up with anything on this subject.

Here's what I'm trying to do and I believe it entails making an image being used as a background on a table into a link.
Here's what the page looks like:http://www.huntsvillecarscene.com/forumdisplay.php?f=14

You see the header at the top that says "Rocket City Mustang Club"? They want that clickable to get back to their homepage. The problem is that the image is actually a background image in a table. :( Otherwise, it would be really simple. I could put a simple link somewhere, but that won't be as elegant.

Any assistance appreciated. :cool:

  • 4 Contributors
  • 5 Replies
  • 191 Views
  • 2 Months Discussion Span
  • Latest Post Latest Post by Killer_Typo

Dani AI

Generated

Quick summary and practical fixes (for future readers): was using a header image set as a table background and wanted that whole header area to act as a link. A CSS background-image itself is not a clickable DOM element, so the cleanest solutions are to either use a real image inside an anchor, make an anchor the element that holds the background, or add an overlaying anchor. pointed toward using a normal image-in-a-link and confirmed that approach worked on the site. Below are three safe, accessible options (recommended order).

Use a real image wrapped with a link (best for semantics and accessibility)

<td class="header">
  <a href="/" class="logo-link">
    <img src="header.jpg" alt="Rocket City Mustang Club">
  </a>
</td>

Make the anchor itself carry the background (no extra overlay)

<a href="/" class="logo" aria-label="Rocket City Mustang Club home">Rocket City Mustang Club</a>

CSS:

.logo {
  display: block;
  width: 100%;
  height: 120px;             /* match your header size */
  background: url('header.jpg') no-repeat center center;
  background-size: cover;
  /* hide visible text for sighted users but keep it for assistive tech */
  position: relative;
  overflow: hidden;
}

Overlay an absolutely positioned link when you cannot change the background usage

<td class="header" style="background: url('header.jpg') no-repeat center center;">
  <a href="/" class="header-cover" aria-label="Home">Home</a>
</td>

CSS:

.header { position: relative; }
.header .header-cover {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: block;
  z-index: 2;
  /* use sr-only CSS instead of text-indent where possible */
}

Quick cautions and tips: prefer the image-in-link for SEO and screen readers; if you hide text visually, use an accessible "sr-only" pattern rather than removing it entirely; avoid covering other interactive elements with an overlay link; keep keyboard focus visible (do not remove outlines), and remember HTML5 allows anchors to wrap block-level elements but older doctypes do not—test on the browsers/doctype you support.

Recommended Answers

All 5 Replies

Member Avatar for tgreer

I don't think you can do this. An image used as a background is just that, a background. It simply isn't a hyperlink. Find something else within the table you can hyperlink.

Member Avatar for Killer_Typo

hah, nvm i see you were able to solve this.

Member Avatar for Mardie

i checked the site and the header which says "Rocket City Mustang Club" is now clickable and links to their hompage. Is there any problem regarding this? or is this problem solved? :rolleyes:

Member Avatar for tgreer

I have no idea why this old thread was resurrected, but the link in the site is a standard link around a standard image... which was what I suggested since a background image (see original question) cannot be inside a hyperlink. So, yes, this is an old, solved thread.

Member Avatar for Killer_Typo

I have no idea why this old thread was resurrected, but the link in the site is a standard link around a standard image... which was what I suggested since a background image (see original question) cannot be inside a hyperlink. So, yes, this is an old, solved thread.

I had an idea but realized it would probably not be the optimal solution ;)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.