CSS - Image That Has Link?

Just wondering if there was any way to have a background-image as a link?

The reason why:
I have a banner across the top of a site, and I'm sure I can probably lay it out using Divs, but I had made the banner a background anyways because I have a horiz. nav. menu that needed to go across the bottom of the banner on the left side. Essentially, there's a logo at the top left, nav. menu on the bottom left, and an image on the entire right side. But now I realized that I should make the logo a link back to the main page of the site. So can I make a background-image as a link, or do I need to pull it out and make it a regular image?

Thanks.

Hi,

Please help me with this, I'm at my wit's end. I can not for the life of me set the background image of a link from the CSS.

I can do it from the link HTML itself with: Code:

style="background-image: url(resources/menu_over.jpg);"

But I CANNOT do it from the CSS with something like this: Code:

<a class="navlink" href="#">asdf</a>

Code:

.navlink
{
  /*background-color: red;*/
  background-image: url(resources/menu_over.jpg);
}

Also, I am referincing my CSS file correctly b/c I tested it with "background-color", as you can see above.

Please help... thanks

I'm having another link issue. I have images in a <ul> that are links. (It's a gallery using Slimbox + Mootools). Everything looks fine in FF. However, in IE, I get these little maybe 2 or 3 pixel (width) link lines that are blue and then purple when visited. They are not on every image. In fact, my <ul> has 4 lines of six images, and the little extra pixel lines fall in the margin after the first image of every line. Here's my CSS:

Code:

a img {
  border: 0 none;
  margin: 4px 4px 10px 4px;
  text-decoration: none;
}

a:hover img {
  border: 1px solid #e5cb43;
  margin: 3px 3px 9px 3px;
}

ul.photog  {
			list-style-position: outside; 
			padding: 0px; margin: 0px;
			border: none;
			background-color: #979089;
			width: 850px;
			text-align: center;
			margin-right: auto;
			margin-left: auto;
	
			
		}

		li.photog  {
			margin: 0px;
			padding: 0px;
			list-style-type:none;
		}	

Strange thing is that I have another <ul> that uses identical code to that one and doesn't have the problem I am experiencing with this one. Any help would be greatly appreciated. Thanks in advance!

OK, I've made this work in the past with no problem, but for some reason, I can't figure out this simple snippet of css for a navigation rollover with an image.
Here's my code: Code:

a.creative_development{
width:289px;
height:28px;
background-image:url('../images/services_titles/creative_title.gif');
}
a.creative_development:hover{
width:289px;
height:28px;
background-image:url('../images/services_titles/creative_title_on.gif');
}

I've checked the paths, folder name, and image names, but it's not working. Can someone see what I'm doing wrong?

thanks

ok here is a thing, it is also a firefox and ei related issue, when i specify background image for my link and specify lef-padding so that, small image that i attached looks like bulleting point, now if my width of the link is longer then my column then logically it will continue on a next line, and everything is great in firefox, but in ei what happens to background image it centers between two lines. So how can i fix it so it sticks to with in first boundary edges of the first line like in fire fox. to see example check the opticsblog.com

Hi everyone,

I have a menu whereby when it's active it is highlighted by two combining images. Whenever the active link is hovered over the image disappears.

I'd like for the image(s) to stay put when it's active and the cursor hovers over it. This particular .css file is above my pay grade and I'm not confident I can do this and have it look good across all browsers.

Just click on the header links and hover over it to see what I'm talking about. Thanks for any input, here's the site...

spotabusiness dot com/new_spota1

(I apparently can't add URLs yet)

I have a test page for an image and it does not display a border. It only changes the cursor to a hand on hoover. Once clicked and subsequently returned to the page, the image does not have the dotted outline of its' border either. This is as it should be. Here is the code:

Code:

<html>
<head>
<style>		
img, fieldset	{
	border: 0;
}
</style>
		<a href="http://validator.w3.org/check?uri=referer" border="0"><img
        src="http://www.w3.org/Icons/valid-html401"
        alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>
</head>
</body>

Next, I have my development pages where I have multiple link styles on each page defined by an external style sheet, prime.css. here is the relavant portion of the code:

Code:

a:link	{
    color: #2F4F4F;
    text-decoration: underline;
}
a:visited	{
    color: #778899;
    text-decoration: underline;
}
a:active	{
    text-decoration: underline
}
a:hover	{
    text-decoration: underline;
	background-color: #2F4F4F; 
    color: #FFFFFF;
}
.intraLink:link	{
	color: #2F4F4F;
	text-decoration: none;
	background-color: #FFFFFF;
}
.intraLink:visited	{
    color: #778899;
    text-decoration: none;
}

.intraLink:active	{
    text-decoration: none;
	background-color: #FFFFFF;
}

.intraLink:hover	{
	text-decoration: none;
	background-color: #FFFFFF;
	color:#D2691E;
}
.back:link	{
	color: #2F4F4F;
	text-decoration: none;
	background-color: #FFFFFF;
}
.back:visited	{
    color: #778899;
    text-decoration: none;
}
.back:active	{
    text-decoration: none;
	background-color: #FFFFFF;
}
.back:hover	{
	text-decoration: none;
	background-color: #FFFFFF;
	color:#2E8B57;
}
.image:link	{
	color: #2F4F4F;
	text-decoration: none;
	background-color: #FFFFFF;
}
.image:visited	{
    color: #778899;
    text-decoration: none;
}
.image:active	{
    text-decoration: none;
	background-color: #FFFFFF;
}
.image:hover	{
    text-decoration: none;
	background-color: #FFFFFF; 
	color: none;
}
.pageStyle {
	background-color: none;
	font-family: "Helvetica Neue", Arial, helvetica, sans-serif;
	width: 800px;
	font-size: 62.5%;
	margin: 0 auto;
	padding-top: 50px;
	margin-bottom: 25px;
	line-height: 1.5;
}
#main {
	float: left;
	width: 590px;
	padding-bottom: 25px;
}

Explanation for the multiple styles: the default link style is to change the 'default' hyperlinks to match my color scheme. The .intraLink is for links within the current page. The .back style is for calling the previous page and finally the .image style is for all images with href references.

Even though this scheme works there is a slight problem. Once an image that is used as a link is clicked and user returns to the page then the image has a dotted line as a border! I'd like it to not have that border, i.e., I'd like it to work just as the test page works, nice and clean.

Also, I'm not sure about my linking styles. I'm new with CSS and it just seems like I've done more than I really need too; like it seems like it's a lot to do to simply not have the border appear when the test page is so lean! Is there a better way? Here's the offending page code and thanks for taking the time to read this, I know it's a trivial point but I'd like to understand why:

Code:

<html>
    <head>
		<title>index.html :: home page
		</title>
		<link rel="stylesheet" type="text/css" href="prime.css">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body class="pageStyle">
	    <b>:: Index.html ::</b><hr>
		<div id="main">
			<ul>
				<li>
				<a href="rs_cv.html">My CV</a>
				</li>
			</ul>
		</div>
		<a href="http://validator.w3.org/check?uri=referer" border="0" class="image"><img
		src="http://www.w3.org/Icons/valid-html401"
		alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>
    </body>
</html>

Greetings

I'm sure if I was cleverer I could figure this out for myself, but...
Also if I could figure out what the last person who more than likely already got an answer about this topic called it in their post, I might have found it in the search, but...

So, what I'm trying to do is this: I have a grid of images that link to a series of pages. To the right there is a standard navagation menu that also links to the same pages, and has a hover background color.

What I (and by "I" I really mean the person who I am building this for, since I wouldn't do it this way, but...) want to have happen is that when you mouseover the images they highlight the corresponding links in the navagation menu.

here is the css:
Code:

// the image grid
#left {
	float: left;
	height: auto;
	text-align: center;
	width: 810px;
}

#left ul {
	padding: 0px;
	list-style-type: none;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
#left img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

#left ul li {
	text-align: center;
	width: auto;
	float: left;
	margin-right: 15px;
	height: 200px;
	margin-bottom: 15px;
}
#left ul li a {
	text-decoration: none;
	color: #000000;
	display: block;
}

// the nav menu
#right {
	height: auto;
	width: 150px;
	float: left;
}
#right ul {
	width: 150px;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	float: right;
}
#right ul li {
	text-align: right;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-transform: uppercase;
}
#right ul li a {
	text-decoration: none;
	color: #000000;
	line-height: 38px;
	width: 135px;
	display: block;
	padding-right: 15px;
}
a.home:hover {
	background-color: #C6CED0;
}
a.bio:hover {
	background-color: #B4C2A1;
}
a.gallery:hover {
	background-color: #B4B281;
}
a.review:hover {
	background-color: #9A8F62;
}
a.current:hover {
	background-color: #AF8459;
}
a.past:hover {
	background-color: #AA8050;
}
a.contact:hover {
	background-color: #8A9B93;
}

...and here is the html:
Code:

<div id="left">
    	<ul>
      <li><a href="gallery_landscape.html"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
      <li><a href="#"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
      <li><a href="#"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
      <li><a href="#"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
      <li><a href="#"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
      <li><a href="#"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
      </ul>
    </div>
     <!--end left -->  
    <div id="right">
    <ul>
    <li><a class="home" href="armin.html">Home</a></li>
    <li><a class="bio" href="#">Landscape</a></li>
    <li><a class="gallery" href="#">Plein-Air</a></li>
    <li><a class="review" href="#">Non-Objective</a></li>
    <li><a class="current" href="#">The Figure</a></li>
    <li><a class="past" href="#">The West</a></li>
    <li><a class="contact" href="#">Comics</a></li>
    
    </ul>
    </div>
  <!--end right -->

Sorry for the long post, but I hope that makes sense...
Thanks in advance for any help.

I want a background image on an element that is a specific size where the background changes when hovered and the element functions as a link. I don't want text for the link to be visible.

I tried doing this as an a tag but the background is only visible for the height of the text unless I make the text huge and then make it transparent and that doesn't work in IE as the text is still visible

I want it to be a specific width and height. It is on the opposite side of a nav bar from my main nav that is a horizontal list so I want is to retail the size of my nav.

I don't want the background to be two different images for plain and hover so I was using background placement and moving the bg image on hover.

I thought I could then do this as a single li but I have not had success.

What is the simplest way to achieve this? I would like to keep the text somehow for accessibility but not have it visible.

Hi ppl, I am new to CSS, and I need help... I have this code in my word-press footer.php ,what I want is to turn image that i put as footer image(footer.jpg),into image-link to other page, I tried something like this but dont work...

Code:

div id="footer" onclick="SOME PAGE'>
    <a href="<?php bloginfo('url'); ?>">
  <img src="images/footer.jpg" alt="<?php bloginfo('name'); ?>" />

...but something i do wrong, below is a original code that i want to edit!

Code:

?php
/**
 * @package WordPress
 * @subpackage Default_Theme
 */
?>

<hr />
<div id="footer" role="contentinfo" style="vertical-align:bottom;"><div style="vertical-align:bottom;"><table width="735" border="0" align="right" cellpadding="0" cellspacing="0">
  <tr>
    <td height="190" align="left" valign="bottom">&nbsp;</td>
    </tr>
  <tr>
    <td height="43" align="left" valign="bottom">&nbsp;</td>
  </tr>
  <tr>
    <td><div align="right" style="margin-right:20px; color:#333333;">Copyright by <a href="<?php bloginfo('url'); ?>/">
      <?php bloginfo('name'); ?>
    </a> 2010. - 2014. All rights reserved.</div></td>
    </tr>
</table>
</div>
</div>
</div>
<?php /* "Just what do you think you're doing Dave?" */ ?>

		<?php wp_footer(); ?>
</body>
</html>

Hi,
I have a link and an image next to each other. I want to make the link hovered when I do mouseover on image. How do I do that ?

Here is the code I have now.
<a href="javascript:undefined" id="imageLinkId">GMNA</a>&nbsp;

<script language="javascript">
if( ... ) {
document.write('<img src="/graphics/channel/plus.png" id="div18Img" alt="Maximize this section" onMouseOver= >'); }
else {
document.write('<img src="/graphics/channel/minus.png" id="div18Img" alt="Minimize this section" onMouseOver= >'); }
</script>

Thanks

I have a site where the header img for the page is actually set in the CSS as a background-image: url (link). However, in good form, I'd like to place an <a href="home.htm"> on that image so that users can click the top header and return to the home page.

Has anyone done this? If so, how did you accomplish it?

I had been helped on this board previously with this question for a site I was working on. I am using the same approach on another site to link back to the home page from the internal pages. And for all intents and purposes it is working. However I could/can not figure out how to precisely position where the link starts and ends.

http://www.guestwardho.com/campground_map.html


If, for example, you go to the above page and put your mouse over the header image you will see the link begins at the left edge of the header image. If you move to the right the link 'ends' a little more then half way across the image - at the uppercase 'H' in 'Ho' for reference. Again, this is fine for this purpose/site, but cannot figure out how to control where the link area starts and ends.


Thank you in advance for your assistance.

Im looking to make it so when someone rolls over a img i have linked it makes the text (which is also a link) next to it act like it has been rolled over as well.

Basically its a list set up like this.


Code:

<dt><a href="#"><img src="blah"/></a></dt>
<dd><a href="#">Text link here</a></dd>

I've seen it done a few ways, but none of them work really for my setup. The ones I've seen set up the IMG as a background positioned.

Anyone have an answer?

I have the following HTML and I am wanting to make the link larger.

Code:

<div id="user4">			
<div class="moduletable">
<ul class="menu">
<li class="item53"><a href="http://rss.com"><img alt="rss" src="/joomla/images/stories/rss-64x64.png"></a>
</ul>		
</div>
</div>

I have tried the following CSS:

Code:

.moduletable li a{
height:50px;

}