How to add a link to a header image?

**rede** · 09-04-2007, 09:06 PM

Hi there

I am unsure how to add a link to my header at the top of my page. My header is a jpeg which has been defined in a CSS as a background image.

I have read some complicated code to do this, none of which I have had success with, and I'm sure there must be an easier way! (Here's hoping!)

Many thanks in advance,
Rachael

**Cball** · 09-04-2007, 09:19 PM

Do you mean make an image into a link?

Here is what you need if thats the case.

HTML Code:

<A HREF="The URL of the site"><img src="The URL of the image"></A>

Example: <A HREF="www.dynamicdrive.com"><img src="images/car.gif"></A>

**rede** · 09-04-2007, 09:35 PM

No, the image is defined in the CSS as a background image, so I can't just add a straightforward link like I would to a regular image that is in the HTML.

Thanks for replying to me though. Hopefully someone will come up with an answer for me!

Rachael

PS: Hope you sorted your problem with display differences in IE/Firefox. I had the same problem too - I kept fiddling around until it suddenly worked. Still don't quite understand why though!

**shagura** · 09-04-2007, 09:41 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>background image link</title>

<style type="text/css">

#logo span, #logo a {
	display:block;
	width:780px; /* whatever your image is */
	height:200px; /* whatever your image is */
	padding:0;
	border-style:none;
	background:url('header.jpg') no-repeat;
	}
	
</style>
</head>

<body>

<div id="logo">
	<span>
		<a href="/"></a>
  	</span>
</div>

</body>
</html>

hth

**Twey** · 09-04-2007, 11:07 PM

If your image is important enough to have a link, it's not suitable as a background image. Background images are for images that have no semantic meaning: they can't have alternative text. Images with semantic meaning should be marked up using the <img> element and given a suitable non-blank alt attribute.

**shagura** · 09-04-2007, 11:28 PM

Originally Posted by Twey

If your image is important enough to have a link, it's not suitable as a background image. Background images are for images that have no semantic meaning: they can't have alternative text. Images with semantic meaning should be marked up using the <img> element and given a suitable non-blank alt attribute.

I disagree slightly on that issue. Using an image as a header image that links back to your main page is widely used, yet most people pop their image in the css so it preloads while the content is laid out. I can also think of using an image as a forwards and backwards button in combination with js where I'd prefer to use css.

**Twey** · 09-05-2007, 02:14 AM

Using an image as a header image that links back to your main page is widely used, yet most people pop their image in the css so it preloads while the content is laid out.

It's still bad practice. There are other ways of doing it, such as setting the background on an invisible element, if you'd like to use CSS to preload the images.

I can also think of using an image as a forwards and backwards button in combination with js where I'd prefer to use css.

Firstly, there are forward and back buttons on the browser toolbar; duplicating browser functionality is bad practice. Secondly, why use CSS there?

If you use CSS for these images, people with non-visual user agents (e.g. screenreaders) will be unable to use the links they provide. This is, obviously, bad. To do so misses the whole point of CSS. CSS was designed to abstract the design from the content. If your image is a link to another page, then it is part of the content, and should be marked up in the HTML. To use CSS for this purpose is an abuse.

**shagura** · 09-05-2007, 08:28 AM

Your wholly right with your points, however, I didn't explain myself enough I guess.

Forward and back buttons for content within a set page, such as a CSS styled image slideshow with a touch of js to allow movement between images is where I have used background-image and tucked the <span> text out the left in the same way as you would do with SIFr. So maintaining accessability & usability but also allowing visually stimulating buttons as required. I'm on your side (web standards), just trying to explain what I mean better.

**rede** · 09-05-2007, 12:19 PM

Hi guys

I have just followed Shagura's method to link my CSS defined background image to my home page, and all works fine, so thank you. I've just come back to the forum to thank you, and have read the other messages and am now confused. Is it best for me to add my header image as a CSS defined background image, or is it best to have it as just an image?

I did try doing the latter method, but I can't get the image to fit the screen without causing the vertical scroll bar to appear, which I really dont' want.

Please can someone clarify which is the best way forward, as I've gone from confused, to "problem solved", to back to square one again.

Many thanks in advance!
Rachael

**Twey** · 09-05-2007, 01:36 PM

It's best to just have it as an image.

Forward and back buttons for content within a set page, such as a CSS styled image slideshow with a touch of js to allow movement between images is where I have used background-image and tucked the <span> text out the left in the same way as you would do with SIFr.

But why? This is a hack to simulate the <img> element's alt attribute, and as they go it's not a bad one, but I'm failing to see the benefits. Also, I'm proud to say I've never used and quite possibly never will use sIFR. Maybe when vector images are better supported so the user can resize the text still.

So maintaining accessability & usability but also allowing visually stimulating buttons as required.

How does using the CSS background-image allow for more visually pleasing buttons over a simple <img>?

Thread: How to add a link to a header image?

Thread Tools

Search Thread

How to add a link to a header image?

Bookmarks

Bookmarks

Posting Permissions