Hyperlink on Background Image

HTML & CSS
1

How do I make it so in the code below, if someone clicks only on the logo, it will take them to the Home Page?

h1#companyLogo:before{
    content: "";
    float: left;
    width: 80px;
    height: 80px;
    background: url('/images/some-logo.png') no-repeat 0 0;
    margin: -4px 10px 15px 0;
}

When I added a hyperlink to the H1 it didn’t do as I expected, i.e. I don’t want the Company Name to be a hyperlink, just the logo.

<h1 id="companyLogo"><a href='/>'>ACME, Inc.</a></h1>
<address>
123 Main Street
Anywhere, USA
Tele: (800) 555-1212
</address>
2

Any reason for not using <img>?

3

You’d have to ask @PaulOB - he helped me out with the code.

4

What issue was he trying to fix for you when he did it as a background image? Perhaps I’m missing context.

5

Let’s see if I can remember…

Well, in the past I used the Gilder-Levin Method for a website’s logo.

But this time my client has a Logo, and he also wants his Company Name and Contact Details to the right of it since he is a local business.

@PaulOB swooped in and suggested the code I posted above, and so who am I to question him?

In retrospect, I’m not sure why that approach was taken… :confused:

6

I believe this is the discussion:

7

@RyanReese,

Per your hint, this is what I changed things to…

<a id="companyBranding" href="/">
    <img src="/images/acme-logo.png" alt="ACME, Inc. logo" />
    <h1>ACME, Inc.</h1>
    <address>
        123 Main Street<br />
        Anywhere, USA<br>
        Tele: (800) 555-1212
    </address>
</a>
8

Because that was a good approach given the details in your original post.:slight_smile:

You have text content for the company name so the logo is in fact just decoration and adds nothing to the semantics of that element and therefore a background image is suitable.

If you want the text and logo as a link then you can do it much the same but just with an anchor thrown into the mix.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
h1 {
	margin:0;
}
h1 a:before {
	content:"";
	float:left;
	width:100px;
	height:100px;
	background:url(http://placehold.it/100x100) no-repeat 0 0;
	margin:0 10px 10px 0;
}
h1 a {
	display:block;
	color:#000;
	text-decoration:none
}
address {font-style:normal}
</style>
</head>

<body>
<h1><a href="#">Acme trading Company</a></h1>
<address>
123 Main street<br>
Anytown, USA<br>
(808) 555-1212<br>
</address>
</body>
</html>

If you want only the logo clickable and not the text heading then move the text out of the anchor.

If you want a real image then just add the image in the anchor and change the rules to this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
h1 {
	margin:0;
}
h1 a img {
	float:left;
	width:100px;
	height:100px;
	margin:0 10px 10px 0;
}
h1 a {
	display:block;
	color:#000;
	text-decoration:none
}
address {font-style:normal}
</style>
</head>

<body>
<h1><a href="#"> <img src="http://placehold.it/100x100" width="100" height="100"> Acme trading Company</a></h1>
<address>
123 Main street<br>
Anytown, USA<br>
(808) 555-1212<br>
</address>
</body>
</html>

If you don’t want the text clickable move it outside.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
h1 {
	margin:0;
}
h1 a img {
	float:left;
	width:100px;
	height:100px;
	margin:0 10px 10px 0;
}
h1 a {
	display:block;
	color:#000;
	text-decoration:none
}
address {font-style:normal}
</style>
</head>

<body>
<h1><a href="#"> <img src="http://placehold.it/100x100" width="100" height="100"> </a>Acme trading Company</h1>
<address>
123 Main street<br>
Anytown, USA<br>
(808) 555-1212<br>
</address>
</body>
</html>

I hardly think you want the address clickable but if you do then you can put an anchor around the whole thing as Ryan suggests although I would put the logo image inside the h1 and not orphaned in no-mans-land (just a personal choice).

There are many ways to do this and every time you change the requirements then the previous approach may not be suitabled. When you have new requirements mention that the requirements have changed and continue the discussion in the relevant thread so others can see what has gone before (or if its a substantial change requiring a new thread then at least link to the old thread to give viewers a hint of what went before).

CSS is always about what comes next and we can only code for what we see now.:slight_smile:

4 Likes
9

Web Design 101: background images are for decoration only, they are not content and they are not clickable or “alt”-able.

5 Likes
10

@PaulOB,

Thanks for the ideas. :slight_smile:

I took your advice and changed the Logo back to a background image to tie things together. I also kept having the Company Name and Address all wrapped in an anchor. As I see it, the Logo, Name, and Address all look like one unit similar to “letterhead” and so I think having them all be one link makes the most sense.

1 Like
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.