• Skip to main content
  • Skip to header right navigation
  • Skip to site footer
Foster Solutions (FSI)

Foster Solutions (FSI)

The Solution is in the Process

  • Home
  • What We Do
    • Websites / Hosting
      • Author’s Sites
      • Boutique Websites
      • Corporate Websites
      • Open Source CMS
      • Quick and Dirty Websites
    • SQL Databases / VBA Automation
    • GIS / Market Research
    • Government/Planning
  • Case Studies
    • Databases/Automation Case Studies
    • GIS/Market Research Case Studies
    • Local Government Case Studies
    • FSI – crosspollination – examples
  • Clients
  • Articles
  • Contact Us

Making a clickable background image

If you want to create a clickable area right over the logo background image, here is what you do.

You can’t just copy the #header div, position it over the logo, make the content invisible and enclose it in an anchor-tag. That would be broken HTML, because you can’t place block-level elements like div inside anchor tags.

You can however enclose a stretched, one-pixel, transparent GIF image in anchor tags (see below) if you have to support old browsers.   Otherwise you can simply turn the anchor itself into an inline-block using CSS 2.1.

<div id=”header”>
<a href=”http://mysite.com”><img src=”pixel.gif” id=”home-link” alt=”” /></a>

</div>

———— CSS ——–

#home-link {
/* this is to create the link area over the bg image logo */
position: absolute;
width: 230px;    /* width of the logo */
height: 70px;   /* height of the logo */
top: 40px; left: 440px; /* top-left corner of logo */
border: 0;
float: left;
}

#header {
width: 970px;
height:114px;
background:url(images/logo_head.gif) no-repeat left;
background-position: 110px 50px;
}

Ready to get started?

Client Survey

Please take this survey if you are interested in a new or modified website. We will assess and get back with you as soon as possible.


Finding Solutions

We work with you to make things faster, easier and better.

  • Facebook
  • LinkedIn

Sites

  • Home
  • Blog
  • About
  • Features
  • Contact
  • Marketing

Features

  • Home
  • Blog
  • About
  • Features
  • Contact
  • Marketing

Support

  • Home
  • Blog
  • About
  • Features
  • Contact
  • Marketing

Copyright © 2023 · Foster Solutions (FSI) · All Rights Reserved

Back to top