how would I make an image inside css to be a link..?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • hagit
    New Member
    • Sep 2010
    • 1
    #1

    how would I make an image inside css to be a link..?

    Hello
    I am creating a site using css.
    in my css, I specify an image to appear in a div tag that is the logo.
    I would like that image to be also a link back to the homepage...

    how would I write it in the css code?

    as of now, this is what it sais in the css code:
    Code:
    #header {
	height: 75px;
	background:#fff url(http://www.redheadtrainer.com/images/just_logo.gif );
}

    how can i make it so the image would also be a link.. or the specific style would be a link?
    I am kind of in the dark about this,
    any help would be great, thank so much!!!
    Last edited by Dormilich; Sep 6 '10, 05:38 AM. Reason: Please use [code] tags when posting code
    Tags: None
    • tharden3
      Contributor
      • Jul 2008
      • 916
      #2
      Hi hagit,

      If you want a picture that can be clicked on and links back to the home page, I suggest you use a combination of the anchor tag and the image tag in your XHTML.

      The "background-image" attribute in CSS is often used to provide non-clickable images that are more for aesthetics.

      Try setting up your logo like this:
      Code:
      <html>
 <head>
  <title>ImageHeaderLink.html</title>
 </head>
 <body>


  <div id = "header">
   <a href = "www.yourwebsite.com/index.html">
   <img src = "logo.jpg"
        height = "80px"
        width = "250px"
        alt = "Our Logo"/>
   </a>
  </div>
 

</body>
</html>
      Because the "img" tag is surrounded by an anchor tag (<a></a>), it makes the image link to whatever you specified in the "href" attribute. You still have control over where the image is positioned because it is inside a div.

      The CSS "background-image" attribute is often covered with other elements of your web page (like text for instance). For this reason, it should only be used in the background. If you want to use an image for something important, like making it a link, stick with the image tag in XHTML.

        Comment

        • tharden3
          Contributor
          • Jul 2008
          • 916
          #3
          It is possible to make the background-image attribute in CSS linkable, but it involves setting some element to "display: block;" and then setting "text-indent:" at about -3000px.

          This is more of a sloppy hack, and it is not good form.

          Cheers,
          Tim

            Comment

            Previous template Next
            Working...