Member Avatar for Aliciajp

{ width:792px; height:189px;
background:#ffffff url("../images/header_background.jpg") no-repeat 0 0 }

this css code is linking to an image that is on multiple pages on my website - I need to link this image to another webpage in the website. where and how do I put the code in the link?

I use Dreamweaver and usually I would just put a hotspot on the image and link it, but because the image is coded onto the page I can't put a hotspot on to it!

Say the link is http://www.njsymphony.org/

Please Help!

Alicia

  • 3 Contributors
  • 2 Replies
  • 101 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by roryt

Dani AI

Generated

A CSS background cannot itself be clicked — you need an actual HTML link layered over or around the element that shows the image. Rather than adding a transparent GIF (as suggested) or trying to edit the background from Dreamweaver's visual tools, use one of these simple, maintainable approaches.

Option 1 — place a real anchor inside the header and stretch it over the background (no extra image required). This keeps the markup semantic and works across browsers:

<div class="site-header">
  <a class="site-header__link" href="/target-page">Site title or logo</a>
</div>

.site-header {
  position: relative;
  height: 200px;
  background-image: url('/images/site-header.png');
  background-repeat: no-repeat;
  background-size: cover;
}

.site-header__link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  text-indent: -9999px; /* keep readable text for screen readers */
}

Option 2 — wrap the header in an anchor (valid in HTML5). This is even simpler when the entire block should link; see the rules for the anchor element on MDN for guidance: a element.

Notes and gotchas:

  • If the page contains other links inside the header (navigation, buttons), do not cover them with a full-size overlay — it will block clicks. Either limit the overlay to the logo area or use z-indexing so interactive children remain accessible.
  • Keep accessible text inside the link (or use an sr-only CSS class) instead of a purely empty anchor.
  • In Dreamweaver, add the anchor in Code view or insert it into the header container and switch to Design view to confirm positioning.

As observed, confirm your image path if the background does not appear; adjusting the path is a separate step once the clickable element is in place.

Recommended Answers

All 2 Replies

Member Avatar for MattEvans

URLs in CSS files are relative to the location of the CSS file. URLs in embedded CSS are relative to the page the CSS is embedded in.

If you want to make sure that you always read the image from the same location, use an absolute link. Either root directory absolute: url("/images/header_background.jpg") or http absolute: url("")

Member Avatar for roryt

I don't think that is what he means matt.

The easiest way to do it is just to create a completely transparent gif and insert it over the background image in the html and then add the link to this. As far as I know that is the only way to do it.

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.