Hyperlinking an image using CSS

Question

I know this is probably the dumbest question ever, however I am a total beginner when it comes to CSS; how do you hyperlink an image on a webpage using an image which is sou

Answer 1

You control design and styles with CSS, not the behavior of your content.

You're going to have to use something like <a id="header" href="[your link]">Logo</a> and then have a CSS block such as:

a#header {
  background-image: url(...);
  display: block;
  width: ..;
  height: ...;
}

You cannot nest a div inside <a> and still have 'valid' code. <a> is an inline element that cannot legally contain a block element. The only non-Javascript way to make a link is with the <a> element.

You can nest your <a> tag inside <div> and then put your image inside :)

If you don't want that, you're going to have to use JavaScript to make your <div> clickable:

Document.getElementById("header").onclick = function() {
    window.location='...'; 
}

Answer 2

CSS is for presentation only, not content. A link is content and should be put into the HTML of the site using a standard <a href=""> tag. You can then style this link (or add an image to the link) using CSS.

Answer 3

That's really not a CSS thing. You still need your A tag to make that work. (But use CSS to make sure the image border is either removed, or designed to your required spec.)

<a href="index.html"><img src="foo" class="whatever" alt="foo alt" /></a>

EDIT: Taking original intent (updated question) into account, a new code sample is below:

<a href="index.html"><img id="header" alt="foo alt" /></a>

You're still in an HTML world for links, as described by other answers on this question.

Answer 4

sorry to spoil your fun ladies and gentlemen, it is possible.

Write in your header: [link](http://"link here")

then in your css:

#header a[href="https://link here"] {
          display: inline-block;
          width: 75px;
          height: 75px;
          font-size: 0;
        }
        .side .md a[href="link here"] {
          background: url(%%picture here%%) no-repeat;
        }