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 sourced from CSS? I am trying to set the title image on my website linkable to the frontpage. Thanks!

Edit: Just to make it clear, I'm sourcing my image from CSS, the CSS code for the header div is as follows:-

#header
{
    width: 1000px;
    margin: 0px auto;
    padding: 0px 15px 0px 15px;
    border: none;
    background: url(images/title.png) no-repeat bottom;
    width: 1000px;
    height: 100px;
}

I want to know how to make this div hyperlinked on my webpage without having to make it an anchor rather than a div.

Answer 1

i've experienced situations where i prefer to work around using an html img tag. the above answers are either bloated (extra) and or don't work.

a zero html is not exactly possible, but you can style your @import link into your css console or whatever you want to call it, and call your header id. but you are going to be limited by the section of the page.

like this:

@import url('https://yourdestinationlink.com');

then in css

#header a[href='https://yourdestinationlink.com'] {
    display: flex;
    position: absolute;
    }
.aside a[href='yourdestination.com'] {
    background-image: url('https://yourimage.com');
    }

or you can link tag your destination link into your html head and reference as above in yor css, like this:

<link src='https://yourdestinationlink.com'/>

another clean option is to create a div to contain your anchor tag that will hold the image you want to turn into a link. first, create a container div. then, put an anchor tag in that div. href your destination link in the anchor. in css, use background-image to style (insert) your image into the anchor.

like this:

1. put your anchor tag in a div and put your destination link into the anchor's href

   <div class="image-container">
    <a href="https://yourdestinationlink.com"></a>
   </div>
   

2. in css

   .image-container a {
       background-image: url('https://yourimage.com');
       }
   

or assign your anchor a class name and style that, like this:

   <div class="image-container">
    <a class="image-link" href="https://yourdestinationlink.com"></a>
   </div>

   .image-link {
        background-image: url('https://yourimage.com');
        }

Answer 2

HTML is the only way to create links - it defines the structure and content of a web site.

CSS stands for Cascading Style Sheets - it only affects how things look.

Although normally an <a/>; tag is the only way to create a link, you can make a <div/> clickable with JavaScript. I'd use jQuery:

$("div#header").click(function() {window.location=XXXXXX;});

Answer 3

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;
        }

Answer 4

Try this - use an H1 as the seat of your graphic instead. Saved my butt time and time again:

<h1 class="technique-six">
    CSS-Tricks
</h1>

h1.technique-six {
    width: 350px;
    padding: 75px 0 0 0;
    height: 0;
    background: url("images/header-image.jpg") no-repeat;
    overflow: hidden;
}

Accessible, and also solid across browsers IE6 and > . You could also link the H1.

Answer 5

You have to use an anchor element, wrapped in a container. On your homepage, your title would normally be an h1, but then on content pages it would probably change to a div. You should also always have text in the anchor element for people without CSS support and/or screen readers. The easiest way to hide that is through CSS. Here are both examples:

<h1 id="title"><a title="Home" href="index.html>My Title</a></h1>
<div id="title"><a title="Home" href="index.html>My Title</a></div>

and the CSS:

#title {
position:relative; /*Makes this a containing element*/
}
#title a {
background: transparent url(../images/logo.png) no-repeat scroll 0 0;
display:block;
text-indent:-9999px; /*Hides the anchor text*/
height:50px; /*Set height and width to the exact size of your image*/
width:200px;
}

Depending on the rest of your stylesheet you may need to adjus it for the h1 to make it look the same as the div, check out CSS Resets for possible solutions to this.

Answer 6

You still create links in HTML with 'a' (anchor) tags just like normal. CSS does not have anything that can specify if something is a link to somewhere or not.

Edit The comments of mine and others still apply. To clarify, you can use JavaScript to make a div act as a link:

<div id="header" onclick="window.location='http://google.com';">My Header</div>

That isn't really great for usability however as people without JavaScript enabled will be unable to click that and have it act as a link.

Also, you may want to add a cursor: pointer; line to your CSS to give the header div the correct mouse cursor for a link.

Answer 7

To link a css-sourced background-image:

#header { 
display:block;

margin: 0px auto;
padding: 0px 15px 0px 15px;
border: none;
background: url(images/title.png) no-repeat bottom;
width: 1000px;
height: 100px;    
}    

<a id="header" href="blah.html" class="linkedImage">

The key thing here is to turn the anchor tag into a block element, so height and width work. Otherwise it's an inline element and will ignore height.

Answer 8

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 9

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 10

<a href="linkto_title_page.html" class="titleLink"></a>

then in your css

.titleLink {
  background-image: url(imageUrl);
}

Answer 11

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.