How to link an image in CSS?

Hello,

I have been trying to do this for hours now, but no success.

I want to make my logo clickable.

Some content of stylesheet:


#header {
	width: 100%;
	margin: 0 auto;
}

#header .container {
	padding: 53px 0 40px;
	background: url('images/logo.png') no-repeat 3px bottom;
}

My PHP file

	
<div id="header">
		<div class="container">
			<!-- This is where my logo needs to go -->
			<?php if (get_bloginfo('description')) : ?><h4><?php bloginfo('description'); ?></h4><?php endif; ?>
		</div>
</div>

Although I may have tried most of what you are going to suggest… please help me.

thank you.

<div id=“header”>
<div class=“container”>
<a id=“logo” href=“http://yourlink.com”></a>
<?php if (get_bloginfo(‘description’)) : ?><h4><?php bloginfo(‘description’); ?></h4><?php endif; ?>
</div>
</div>

#header {
width: 100%;
margin: 0 auto;
}

#header .container {
padding: 53px 0 40px;
}
#logo { display:block; height: (height of logo image); width: (width of logo image); background: url(‘images/logo.png’) no-repeat ;}

Although I may have tried most of what you are going to suggest… please help me.
Hi swell, Welcome to SitePoint :slight_smile:

Have you tried to absolute position an anchor over the logo portion of your BG image.
This code below should show you how to go about it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo Layout</title>

<style type="text/css">
#header {
    width: 800px; /*for demo only*/
    margin: 0 auto;
}
#header .container {
    padding: 53px 0 80px 80px;
    background:orange url('images/logo.png') no-repeat 3px bottom;
    position:relative;
}
a#logo {
    position:absolute;
    width:80px; /*logo width ?*/
    height:80px; /*logo height ?*/
    left:3px;
    bottom:0;
    background:red; /*for demo only*/
}
</style>

</head>
<body>

<div id="header">
    <div class="container">
        <!-- This is where my logo needs to go -->
        <p>Lorem ipsum dolor sit amet consectetuer elit sollicitudin 
        Curabitur convallis justo. Molestie ut aliquet eros mauris 
        tristique Integer pretium enim nibh elit.</p>
        <a id="logo" href="#"></a>
    </div>
</div>

</body>
</html>