Creating a Linkable Background Image in CSS

hifispin
hifispin used Ask the Experts™
on
Here is part of my CSS for a background image.  I want to be able to add a hyperlink to the background image.
/* main blocks */
#page-box {
	min-height:100%;
	position:relative;
	background:url(../images/product.gif) no-repeat 100% 90px;
}
* html #page-box {height:100%;
}

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Are you saying that you want a user to click anywhere on the image and it will be a link?
if that's the case you'd have to do have your html look something like this:

<div id="page-box"><a href="xxxx">something</a></div>

your css would have to specifiy the size of the div, but then set the <a> to 100% each way.

#page-box{
    width:100px;
    height:250px;
}
a {
    width:100%;
    height100%;
}

Author

Commented:
Well, I am a bit ashamed but, I had someone develope the CSS and I wanted to make sure the "Featured Product" was a clickable image.  I tried to replicate what they did for the logo but It is throwing off the whole page.
<body>
	<!-- page box start -->
	<div id="page-box">
		<!-- logo start -->
		<h1 id="logo" class="vcard"><span><a href="index.cfm">Pioneer International</a></span></h1>
		<!-- logo end -->
		<!-- container start -->
		<div id="container">

Open in new window

Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Commented:
It is important to note that the anchor tag or link is not being placed on the background but on an object in front of the background.  I don't recommend it but you could use a transparent div set to the height and width, OR you could use the code attached and set the height and width declarations for the id you use in your CSS.
<div id="my-logo" onclick="location.href='http://www.mycompany.com';" style="cursor:pointer;"></div>
 
#my-logo{
height: ***px;
width: ***px;
background: url('../img/my-logo.gif') transparent 0px 0px no-repeat;
}

Open in new window

Author

Commented:
Hi;

This part:

<div id="my-logo" onclick="location.href='http://www.mycompany.com';" style="cursor:pointer;"></div>

Works perfect in I.E. 8 and FireFox, why do you not recommend it?

-E

Author

Commented:
ahh I spoke too soon, basically it makes the whole page a link...  If I use the second part of the code it totally wacks out the entire page.
css
----------------------------------
html {height:100%;}
body {
	color:#ccc;
	font:13px/17px arial, helvetica, sans-serif;
	margin:0;
	background:#272727 url(../images/bg-top-panel.jpg) repeat-x;
	min-width:900px;
	height:100%;
}
#inner {
	background-color:#fff;
	color:#000;
}
#inner a {color:#000;}
/* Common Parts */
a {color:#ccc;}
a:hover {text-decoration:none;}
p {
	margin:0 0 15px;
	line-height:17px;
}
img {border-style:none;}
form, fieldset {
	margin:0;
	padding:0;
	border-style:none;
}
input, select, label, textarea {vertical-align:middle;}
input.text,
select,
textarea {
	font:100% arial, helvetica, sans-serif;
	color:#000;
}
ul {
	margin:0 0 15px 15px;
	padding:0;
}
ul ul {margin:2px 0 2px 15px;}
/* main blocks */
#page-box {
	min-height:100%;
	position:relative;
	background:url(../images/product.gif) no-repeat 100% 90px;
}
 
* html #page-box {height:100%;
}
/* logo */
#logo {
	position:absolute;
	top:40px;
	left:32px;
	z-index:2;
}
#logo span {
	width:246px;
	height:170px;
	padding:80px 0 0 77px;
	overflow:hidden;
	text-indent:-9999em;
	background:url(../images/logo.png) no-repeat;
	display:block;
}
#logo a {
	display:block;
	width:245px;
	height:80px;
	cursor:pointer;
	position:relative;
}
/* container */
#container {
	width:100%;
	overflow:hidden;
	padding:300px 0 290px;
}
#inner #container {padding:323px 0 315px;}
#inner .wrap {background:none;}
/* top panel */
#top-panel {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:65px;
	z-index:3;
}
#top-panel ul {
	float:left;
	margin:0 0 0 32px;
	list-style:none;
	font-size:12px;
	text-transform:uppercase;
	display:inline;
}
#top-panel li {
	float:left;
	position:relative;
	margin:0 25px 0 0;
	line-height:35px;
}
#top-panel li a {
	color:#b1b1b1;
	text-decoration:none;
}
#top-panel li a:hover, #top-panel li:hover a, #top-panel li.hover a {
	color:#c90;
	text-decoration:none;
}
#top-panel li ul {
	float:none;
	position:absolute;
	top:34px;
	left:-10px;
	display:none;
	margin:0;
	width:113px;
}
#top-panel li:hover ul, #top-panel li.hover ul {display:block;}
#top-panel li li {
	background:#0e0c0c;
	border-top:1px solid #1a1818;
	float:none;
	margin:0;
	line-height:14px;
	padding:4px 10px;
}
#top-panel li li a {color:#fff !important;}
#top-panel li li a:hover {color:#c90 !important;}
/* search form */
.search-form {
	float:right;
	margin:2px 32px 0 0;
	display:inline;
	background:url(../images/bg-input.gif) no-repeat;
	padding:0 0 0 10px;
}
.search-form span {
	float:left;
	width:175px;
	height:17px;
	background:#c00;
	margin:5px 15px 0 0;
	overflow:hidden;
}
.search-form input {
	float:left;
	margin:2px 0 0;
}
.search-form span input {
	margin:0;
	padding:1px 2px;
	width:175px;
	margin:-2px 0 0 -2px;
}
/* footer */
#footer {
	height:230px;
	overflow:hidden;
	position:relative;
	margin:-281px 0 0;
	border-top:1px solid #404040;
	background:#333;
	color:#ccc;
	text-align:center;
	padding:20px 0 30px;
	font-size:12px;
	z-index:3;
}
#inner #footer {border-color:#030303;}
#footer a {
	color:#999;
	text-decoration:none;
}
#footer a:hover, #footer li.active a {color:#fc0;}
/* services */
.services {
	margin:0 0 60px;
	list-style:none;
}
.services li {
	display:inline;
	margin:0 30px;
}
.services li img {
	vertical-align: top;
	cursor: pointer;
}
/* add navigation */
.add-nav {
	float:left;
	margin:0 0 0 40px;
	list-style:none;
	text-transform:uppercase;
	text-align:left;
	display:inline;
}
.add-nav li {
	float:left;
	margin:0 65px 0 0;
}
.add-nav ul {
	float:none;
	margin:0;
	list-style:none;
}
.add-nav li li {
	float:none;
	margin:0;
}
 
/* address holder */
.address-holder {
	background:url(../images/bg-adr-holder.gif) repeat-x;
	border-top:1px solid #3b3b3b;
	float:right;
	width:330px;
	margin:-16px 40px 0 -50px;
	display:inline;
	padding:15px 0 0;
	color:#ccc;
	font-size:14px;
	min-height:93px;
}
* html .address-holder {height:93px;}
.address-holder strong {
	position:absolute;
	left:-9999em;
	text-indent:-9999em;
}
.address-holder dl {margin:0 0 10px;}
.address-holder dt {display:inline;}
.address-holder dd {
	display:inline;
	margin:0;
}
.address-holder address {
	font-style:normal;
}
#footer p {
	position:absolute;
	bottom:10px;
	left:0;
	width:100%;
	margin:0;
}
/* colums */
.colums {
	background:url(../images/pxl.gif) repeat-y 50% 0;
	padding:0 10px;
}
.wrap {
	background:url(../images/border-btm.gif) no-repeat 50% 100%;
	overflow:hidden;
	width:100%;
}
.bg {
	background:url(../images/border-top.gif) no-repeat 50% 0;
	overflow:hidden;
	width:100%;
}
.column {
	float:left;
	width:49.9%;
}
.column .inner {
	padding:10px 10px 30px 20px;
	height:1%;
	overflow:hidden;
}
.colums h2 {
	text-align:center;
	background:url(../images/bg-title.jpg) no-repeat 50% 0;
	font-size:18px;
	color:#cc8c02;
	padding:10px 0;
	margin:0 0 20px;
}
.news-events-list {
	margin:0 0 10px;
	list-style:none;
	color:#cc8c02;
}
.news-events-list li {
	background:url(../images/ico-doc.gif) no-repeat 0 3px;
	padding:0 0 0 17px;
	margin:0 0 7px;
}
.news-events-list a {color:#ee6103;}
/* content */
.sidebar {
	float:left;
	width:232px;
	margin:0 30px;
	display:inline;
}
 
/* news page */
 
}
.news-events-page {
	margin:0 0 10px;
	list-style:none;
	color:#cc8c02;
}
.news-events-page li {
	background:url(../images/ico-doc.gif) no-repeat 0 3px;
	padding:0 0 0 17px;
	margin:0 0 7px;
}
.news-events-page a {color:#000;}
/* content */
.sidebar {
	float:left;
	width:232px;
	margin:0 30px;
	display:inline;
}
 
/* content */
.smallsidebar {
	float:left;
	width:25px;
	margin:0 30px;
	display:inline;
}
/* category */
.category {
	margin:0;
	list-style:none;
	font-size:14px;
	border-bottom:1px solid #999;
}
.category li {
	border:solid #999;
	border-width:1px 1px 0;
	padding:3px 10px;
	vertical-align:top;
	height:1%;
	background:#fff;
}
.category li:hover, .category li.hover {position:relative;}
.category li a {text-decoration:none;}
.category li a:hover, .category li:hover a, .category li.hover a {color:#f60 !important;}
.category ul {
	position:absolute;
	width:185px;
	top:-1px;
	left:167px;
	background:#fff;
	display:none;
	margin:0;
	list-style:none;
	border-bottom:1px solid #999;
}
.category li:hover ul, .category li.hover ul {display:block;}
.category li:hover li a, .category li.hover li a, .category li li a {color:#000 !important;}
.category li:hover li a:hover, .category li.hover li a:hover, .category li li a:hover {color:#f60 !important;}
/* content */
.content {
	margin:0 0 0 292px;
}
.widecontent {
	margin:0 0 0 85px;
}
#imgPreview {
	background: #222 url(../images/loading.gif) no-repeat center;
	padding: 10px;
	z-index: 999;
	border: none;
}
#imgPreview span {
	color: white;
	font-size: 1em;
	text-align: center;
	display: block;
	padding: 10px 0 3px 0;
}
.loading {
	height: 32px;
	width: 32px;
	
	/* Box Slider */
}
 
 div.slidingBox {
	color: #6c6c6c;
    padding: 1px;
	width: 400px;
	background-color: #f8f8f8;
	border: 1px solid #6c6c6c;
	font:13px/17px arial, helvetica, sans-serif;
  }
  p.ptitle {
	font:13px/17px arial, helvetica, sans-serif;
	text-transform:uppercase;
  }
  p.entirePost {
	display: none;
	padding: 10px;
  }
-------------------------------------------------------------
html
-------------------------------------------------------------
<!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>
		<title>Site Name</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
		<link rel="stylesheet" type="text/css" href="css/all.css" />
		<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />  
		<link rel="stylesheet" type="text/css" href="css/style-projects-jquery.css" /> 
		<link rel="stylesheet" type="text/css" href="css/jquery.twitter.css" /> 
		<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="js/imgpreview.full.jquery.js"></script>
		<script type="text/javascript" src="js/main.js"></script>
		<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="css/ie6.css" media="screen"/><![endif]-->
		<script type="text/javascript" src="js/jquery.twitter.js"></script>
 
		<script type="text/javascript">
		<!--//--><![CDATA[//><!--
			$(document).ready(function() {
				$("#twitter").getTwitter({
					userName: "PioneerInt",
					numTweets: 1,
					loaderText: "Loading tweets...",
					slideIn: true,
					showHeading: false,
					headingText: "Latest Tweets",
					showProfileLink: false
				});
			});
		//--><!]]>
		</script>
		</head>
	<body id="inner">
	<!-- page box start -->
	<div id="page-box"onclick="location.href='contact.cfm';" style="cursor:pointer;">
 
		<!-- logo start -->
		<h1 id="logo" class="vcard"><span><a href="index.cfm">The Business</a></span></h1>
		<!-- logo end -->
		<!-- container start -->
		<div id="container">
			<div class="wrap">
				<!-- sidebar start -->
				<div class="smallsidebar">
				&nbsp;
				</div>
				<!-- sidebar end -->
				<!-- content start -->
				<div class="widecontent">
					<table cellspacing="5" cellpadding="5" border="0">
						<tr>
							<td valign="top"><img src="images/PoineerBuilding.jpg" alt="" style="border: 15px solid #FFFFFF;" hspace="10" vspace="10" align="left" />
							<cfoutput query="GetContent">#Content#</cfoutput>
							</td>
					</table>
				</div>
				<!-- content end -->
			</div>
		</div>
		<!-- container end -->
		<!-- top panel start -->
		<div id="top-panel">
		<!--- ********************* --->
		<!--- TOP NAVIGATION STARTS --->
			<ul id="nav">
				<li>
					<a href="about.cfm">ABOUT</a>
					<ul>
						<li><a href="testimonials.cfm">TESTIMONIALS</a></li>
						<li><a href="index.cfm">HOME</a></li>
					</ul>
				</li>
				<li>
					<cfif IsDefined("session.user.MemberID")>
						<cfif session.user.School IS 1>
						<!--- change it for scool --->
							<a href="productpage.cfm"><cfoutput>#session.user.SchoolShortName#</cfoutput> STORE</a>
							
							<ul>
								<li><a href="Product_cart.cfm">VIEW CART</a></li>
								<li><a href="order_status.cfm">ORDER STATUS</a></li>
								<li><a href="index.cfm?logout=true">LOG OUT</a></li>
							</ul>
						<cfelseif session.user.Resident IS 1>
						<!--- change it for Resident --->
							<a href="productpage.cfm">RESIDENT STORE</a>
							
							<ul>
								<li><a href="Product_cart.cfm">VIEW CART</a></li>
								<li><a href="order_status.cfm">ORDER STATUS</a></li>
								<li><a href="index.cfm?logout=true">LOG OUT</a></li>
							</ul>
						</cfif>
						<cfelse>	
						<!--- change it for Doctor --->
							<a href="productpage.cfm">ONLINE STORE</a>
					
							<ul>
								<li><a href="special_pricing.cfm">STUDENTS</a></li>
								<li><a href="special_pricing.cfm">RESIDENTS</a></li>
								<li><a href="Product_cart.cfm">VIEW CART</a></li>
								<li><a href="order_status.cfm">ORDER STATUS</a></li>
							</ul>
				</cfif>
				</li>
				<li><a href="news.cfm">NEWS</a></li>
				<li>
					<a href="resource_center.cfm">RESOURCE CENTER</a>
					<ul>
						<li><a href="jobs.cfm">JOB FORUM</a></li>
						<li><a href="links.cfm">LINKS</a></li>
					</ul>
				</li>
				<li><a href="contact.cfm">CONTACT</a></li>
				<cfif IsDefined("session.user.MemberID")>
				<cfif session.user.School IS 1>
				<li><a href="Required_Products.cfm">REQUIRED EQUIPMENT</a>
					<ul>
						<li><a href="ordering_instructions.cfm">ORDERING INSTRUCTIONS</a></li>
					</ul>
				</li>
				</cfif>
				<cfelse>
				<li><a href="Site_Login.cfm">CREATE ACCOUNT</a></li>
				</cfif>
				
			</ul>
			<!--- TOP NAVIGATION ENDS --->
			<!--- ********************* --->
			<!-- search form start -->
			<form action="#">
				<fieldset class="search-form">
					<span><input type="text" value="" class="text" /></span>
					<input type="image" src="images/btn-search.gif" alt="search" />
				</fieldset>
			</form>
			<!-- search form end -->
		</div>
		<!-- top panel end -->
	</div>
	<!-- page box end -->
	<!-- footer start -->
	<div id="footer">
		<ul class="services">
			<li><a href="http://www.facebook.com/pages/Joliet-IL/Pioneer-International-Inc/86568388444?ref=s" target="_blank" rel="images/facebook_screenshot.jpg"><img src="images/logo-01.gif" alt="logo" /></a></li>
			<li><a href="https://twitter.com/PioneerInt" target="_blank" rel="images/twitter_screenshot.jpg"><img src="images/logo-02.gif" alt="logo" /></a></li>
			<li><a href="http://www.linkedin.com/in/pioneerinternational" target="_blank" rel="images/linked_screenshot.jpg"><img src="images/logo-03.gif" alt="logo" /></a></li>
			<li><a href="http://www.youtube.com/user/PioneerStudent" target="_blank" rel="images/youtube_screenshot.jpg"><img src="images/logo-05.gif" alt="logo" /></a></li>
		</ul>
		<!--- ***************************** --->
		<!--- FOOTER NAVIGATION BEGINS HERE --->
		<cfif IsDefined("session.user.MemberID")>
	<cfif session.user.School IS 1>
		<!--- change it for scool --->
			<ul class="add-nav">
			<li>
				<ul>
					<li><a href="index.cfm?logout=true">LOG OUT</a></li>
					<li class="active"><a href="about.cfm">ABOUT</a></li>
					<li><a href="testimonials.cfm">TESTIMONIALS</a></li>
					<li><a href="index.cfm">HOME</a></li>
				</ul>
			</li>
			<li>
				<ul>
					<li><a href="productpage.cfm"><cfoutput>#session.user.SchoolShortName#</cfoutput> STORE</a></li>
					<li><a href="Required_Products.cfm">REQUIRED EQUIPMENT</a></li>
					<li><a href="ordering_instructions.cfm">ORDERING INSTRUCTIONS</a></li>
					<li><a href="order_status.cfm">ORDER STATUS</a></li>
					<li><a href="Product_cart.cfm">VIEW CART</a></li>
					
				</ul>
			</li>
			<li>
				<ul>
					<li><a href="news.cfm">NEWS</a></li>
					<li><a href="resource_center.cfm">RESOURCE CENTER</a></li>
					<li><a href="jobs.cfm">JOB FORUM</a></li>
					<li><a href="links.cfm">LINK RESOURCES</a></li>
					<li><a href="contact.cfm">CONTACT</a></li>
				</ul>
			</li>
		</ul>			
 
		<cfelseif session.user.Resident IS 1>
		<!--- change it for Resident --->
		<ul class="add-nav">
			<li>
				<ul>
					<li><a href="index.cfm?logout=true">LOG OUT</a></li>
					<li class="active"><a href="about.cfm">ABOUT</a></li>
					<li><a href="testimonials.cfm">TESTIMONIALS</a></li>
					<li><a href="index.cfm">HOME</a></li>
				</ul>
			</li>
			<li>
				<ul>
					<li><a href="productpage.cfm">ONLINE STORE</a></li>
					<li><a href="order_status.cfm">ORDER STATUS</a></li>
					<li><a href="Product_cart.cfm">VIEW CART</a></li>
				</ul>
			</li>
			<li>
				<ul>
					<li><a href="news.cfm">NEWS</a></li>
					<li><a href="resource_center.cfm">RESOURCE CENTER</a></li>
					<li><a href="jobs.cfm">JOB FORUM</a></li>
					<li><a href="links.cfm">LINK RESOURCES</a></li>
					<li><a href="contact.cfm">CONTACT</a></li>
				</ul>
			</li>
		</ul>
							
 
		</cfif>
		<cfelse>	
		<!--- change it for Doctor --->
		<ul class="add-nav">
			<li>
				<ul>
					<li><a href="Site_Login.cfm">CREATE ACCOUNT</a></li>
					<li class="active"><a href="about.cfm">ABOUT</a></li>
					<li><a href="testimonials.cfm">TESTIMONIALS</a></li>
					<li><a href="index.cfm">HOME</a></li>
				</ul>
			</li>
			<li>
				<ul>
					<li><a href="productpage.cfm">ONLINE STORE</a></li>
					<li><a href="special_pricing.cfm">STUDENTS</a></li>
					<li><a href="special_pricing.cfm">RESIDENTS</a></li>
					<li><a href="order_status.cfm">ORDER STATUS</a></li>
					<li><a href="Product_cart.cfm">VIEW CART</a></li>
				</ul>
			</li>
			<li>
				<ul>
					<li><a href="news.cfm">NEWS</a></li>
					<li><a href="resource_center.cfm">RESOURCE CENTER</a></li>
					<li><a href="jobs.cfm">JOB FORUM</a></li>
					<li><a href="links.cfm">LINK RESOURCES</a></li>
					<li><a href="contact.cfm">CONTACT</a></li>
				</ul>
			</li>
		</ul>
</cfif>
<!--- FOOTER NAVIGATION ENDS HERE --->
<!--- ***************************** --->
		<div class="address-holder vcard">
			<strong class="fn org">International Acme</strong>
			  <div id="twitter"></div>     
		</div>
		<p>&copy;2009,  All Rights Reserved | V. </p>
	</div>
	<!-- footer end -->
	</body>
</html>

Open in new window

Commented:
HiFi, how big is your background image?

The example I gave is more for usage like this... http://s8web.com/ee/clickondiv/

If you're trying to make the entire body background a link, we might have to find another solution.

Author

Commented:
The image size will always be 288x162 Pixels.  The issue I am fining is that when I add those dimensions, it throws the image onto the other side.  The CSS is designed to be flexable.

Author

Commented:
I found another solution using part of this solution.

Commented:
OK, I was working on the attached code when you closed this.  I am glad you found a solution but take a look at this if it saves you some work.  I only included the areas in which I made changes and thanks for the "B".  =P

1.  The /* logo */ section of your css.  Notice the areas I commented out and added to the logo id.  I wasn't sure if the text "The Business" is supposed to show or not.  If not, uncomment the "text-indent" line.

2.  The /* top-panel */ section of your css.  I commented out the height because it was overlapping the logo region and making only part of the image clickable.  I am not sure what the logo graphic looks like but thought you may want to have the entire image clickable.  If not and it affects your layout, then uncomment the "height" declaration.

3.  The "page-box" and "logo" section of your code.  This tested well when I commented out your cfoutputs.  The only change I made was I got rid of the span and anchor tags and applied the logo id to a div with the javascript from earlier.
/* logo */
#logo {
	position:absolute;
	top:40px;
	left:32px;
	z-index:2;
	width:288px;
	height:162px;
	/*padding:80px 0 0 77px;*/
	/*overflow:hidden;*/
	/*text-indent:-9999em;*/
	background:url(../images/logo.png) no-repeat;
	display:block;
}
/*#logo span {
	width:246px;
	height:170px;
	padding:80px 0 0 77px;
	overflow:hidden;
	text-indent:-9999em;
	background:url(logo.png) no-repeat;
	display:block;
}
#logo a {
	display:block;
	width:245px;
	height:80px;
	cursor:pointer;
	position:relative;
}*/
 
/* top panel */
#top-panel {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	/*height:65px;*/
	z-index:3;
}
 
 
	<!-- page box start -->
	<div id="page-box">
 		<!-- logo start -->
		<div id="logo" onclick="location.href='contact.cfm';" style="cursor: pointer;">
			<h1 class="vcard">The Business</h1>
			<p>Hello World!</p>
		</div>
		<!-- logo end -->

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial