View Full Version : How to add a link to a header image?
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.
<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>
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
<!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
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
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.
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.
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
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>?
I seem to be caught up in a debate here!
Okay, so it's best to have the header as an image. But when I do this, I end up with a vertical scroll bar (unless I make my image - or the div that holds it - smaller in width, and then the image doesn't fill the whole width of the screen).
Please can you explain how I can get an image into my masthead div without ending up with a vertical scroll bar, and so that it fits snuggly across the whole screen width.
Many thanks in advance!
Rachael
A vertical scrollbar? Just how tall is your image? o.@ This sounds like a whole-page image rather than a header image!
jscheuer1
09-05-2007, 04:49 PM
One solution which wouldn't be too bad would be to have the element that has the image as its background have a link which fills it. Depending upon the markup, the link itself could be the element with the background image. Either way, the link tag's display property would need to be block. For accessibility, the link could be given a title attribute. None of this makes much sense unless there are other images and/or text showing over the background image. If images, their alt attributes should help point out what the link is for and, if text, it should by its very meaning give a clue to the link's purpose.
I still have to go with Twey, though because:
An image won't preload any faster being in the background than being on a page. If you need to preload it on another page(s), but not view it there, put it on them as visibility:hidden. This is a more certain method than having it linked via css to a page that doesn't use it as a background image.
Not to mention that, IE has issues with background images, often causing excessive calls to the server for them.
Hi John
Thanks for replying. The solution you gave me I am presuming relates to adding a link if I use it as a background image defined as a CSS. I've managed to add a link doing it this way, but now understand that adding my header/logo across the top of my page is best done as a straight image. My problem is that when I do this, it causes a vertical scroll bar to appear. To answer Trey's question, I don't understand what the HEIGHT of my image has got to do with the VERTICAL scrollbar I'm having problems with. My image is only about 80pixels tall.
I'm a newbie here, so would greatly appreciate it if someone could put me straight on how to add a straight image header that fills the whole width of my page without causing a vertical scrollbar. I seem to have been caught up in a debate between other people on this thread, and this has served to confuse me, rather than help. So please, can someone put me straight.
Many thanks in advance.
Rachael
My problem is that when I do this, it causes a vertical scroll bar to appear. To answer Trey's question, I don't understand what the HEIGHT of my image has got to do with the VERTICAL scrollbar I'm having problems with.Because only an overly tall image would cause a VERTICAL (up/down) scrollbar to appear. I suspect you've possibly become confused between VERTICAL and HORIZONTAL (left/right).
The best solution is probably to wrap the image in a <div> with overflow: hidden; like so:
<div style="overflow: hidden; width: 100%;">
<img src="yourimage.png" alt="My Site">
</div>If you haven't tested it at a lower resolution before, though, it's likely that you haven't tested in a higher one either. Make sure that your image blends nicely into the background, or users with large windows will see an ugly sudden change in colour.
Hi Twey,
My mistake! I did indeed mean the horizontal scrollbar. I'll try out your advice on my header as a straight image, and hopefully it will solve my problem of a horizontal scroll bar. When you say to add "alt= "my site", do I add my domain name in the speech marks, or the name of my site as defined in dreaweaver? I don't really understand what the alt tab is for.
Rachael
You add some text that will be displayed to users who can't view the image for whatever reason. Generally such a header image has the site's name in it; if so, that name should be in the alt as well.
Thank you, Twey! All fixed and working. I really appreciate you taking the time to answer my questions. Many thanks,
rachael
Powered by vBulletin® Version 4.2.2 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.