Welcome!

[castles]

How do I make my logo a clickable link back to the homepage using my css


/* header-photo */
#header-photo {
position: relative;
clear: both;
margin: 5px auto;
display: block;
height: 132px;
width: 850px;
background: #fff url(artistically-speaking-logo.jpg) no-repeat center center;
}

[Andy]

Example as follows:

Code: Select all

#brand a {
  background: url(logo.png) no-repeat;
  display: block;
  height: 150px;
  overflow: hidden;
  text-indent: -9999em;
  width: 300px;
}


Code: Select all

<div id="brand"><a href="/">Site Name</a></div>


[Tronicscribe]

Code: Select all

<div id="brand"><a href="/">Site Name</a></div>


Just to keep your code cleaner and minimal, you should just put the id in the a tag

Code: Select all

<a id="brand" href="/">site name</a>

Also, if this logo with the id of brand is only going to appear once per page then this is fine. If you plan on having the same logo with the same id of brand more than once on a page, you should change the id to a class, because you shouldn't have more than one id with the same name on each page. Good practice

[mike360]

I have stopped using the negative text-indent trick as a means of displaying a logo (or any link with a background image and text, for that matter). Google does not look too kindly upon this method as it can be used to manipulate your search engine ranking.

From Google Webmaster Tools - Hidden Text and Links:

Hiding text or links in your content can cause your site to be perceived as untrustworthy since it presents information to search engines differently than to visitors. Text (such as excessive keywords) can be hidden in several ways, including:

Using white text on a white background
Including text behind an image
Using CSS to hide text
Setting the font size to 0

Your logo is an image, so semantically speaking, you're better off to just use an <img> tag and accompanying ALT text.

Code: Select all

<a href="/"><img src="path/to/mylogo.png" alt="My Company Name" /></a>


Hope this helps.

[smart.1]

Your logo is an image, so semantically speaking, you're better off to just use an <img> tag and accompanying ALT text.

Code: Select all

<a href="/"><img src="path/to/mylogo.png" alt="My Company Name" /></a>


Hope this helps.

I prefer this solution too, seems clearer.