Marc L Marc L - 4 months ago 6
CSS Question

Add a link to an image in a css style sheet

I am looking to add a link to an image in acss style sheet so it will nagvigate to the link when the image is pressed.

The code for the image itself is:

background-image: url(images/logo.png);
width: 981px;
height: 180px;
margin-left: auto;
margin-right: auto;

What is the code to add to allow it to navigate to a hyperlink? For example: If I wanted it to navigate to


You can not do that...

via css the URL you put on the background-image is just for the image.

Via HTML you have to add the href for your hyperlink in this way:

<a href="" id="logo">Your logo</a>

With text-indent and some other css you can adjust your a element to show just the image and clicking on it you will go to your link.


Because I'm sure you're lazy to search what text-indent do and trying my code you had text on your image I'm here again to show you and explain why my solution is much better:

<a href="" id="logo">Your logo name</a>

This block of HTML is SEO friendly because you have some text inside your link!

How to style it with css:

#logo {
  background-image: url(images/logo.png);
  display: block;
  margin: 0 auto;
  text-indent: -9999px;
  width: 981px;
  height: 180px;

Then if you don't care about SEO good to choose the other answer.