css background image won't display - html

Question

My CSS calls for a background image that I want changed on a:hover. The class is working fine with the font color change, but I can't get my image to display anywhere.
<ul class="qualities_cycle">
<a href="http://spielconsulting.com/qualities/transition/" class="cyclehover">
<li class="grid_4">
<div class="title-wrap">
<h3>Partnership Transition</h3>
</div>
<h5>Lorem ipsum dolor sit amet consec</h5>
Seven out of ten Associateships fail - a devastating statistic. Spiel Consulting, however, sees tremendous success with Associateships...
</li>
</a>
</ul>
And here's the CSS
.qualities_cycle {
width:100%;
overflow:hidden;
margin:0;
padding:0;
}
.qualities_cycle li {
padding:0;
background:none;
border:none;
line-height:22px;
}
.qualities_cycle li .title-wrap {
position:relative;
padding:0 90px 0 60px;
}
.qualities_cycle li .icon {
position:absolute;
left:0;
top:0;
}
.qualities_cycle li .title-wrap h3 {
font-weight:normal;
}
.qualities_cycle li .title-wrap h3 a {
color:#0f0f0f;
text-decoration:none;
}
.qualities_cycle li .title-wrap h3 a:hover {
color:#80B34C;
}
.grid_4 {
display:inline;
float: left;
position: relative;
padding: 19px 9px !important;
}
a.cyclehover {
color:#0F0F0F;
background-image:url("http://spielconsulting.com/wp-content/uploads/2011/04/icon1.gif") no-repeat scroll 0 0 transparent;
-o-transition:color .2s ease-out, background 1s ease-in;
-ms-transition:color .2s ease-out, background 1s ease-in;
-moz-transition:color .2s ease-out, background 1s ease-in;
-webkit-transition:color .2s ease-out, background 1s ease-in;
/* ...and now override with proper CSS property */
transition:color .2s ease-out, background 1s ease-in;
}
a.cyclehover:hover {
color: #4C739B;
background-image:url("http://spielconsulting.com/wp-content/uploads/2011/04/icon2.gif") no-repeat scroll 0 0 transparent;
}
a jsfiddle link is here
I'm trying to get three columns in and this is what I have, but the images aren't showing up:

Answer 1

Just change CSS related to a.cyclehover
a.cyclehover {
color: #0F0F0F;
background-image: url("http://spielconsulting.com/wp-content/uploads/2011/04/icon1.gif");
display: block;
float: left;
background-repeat: repeat;
-o-transition: color .2s ease-out, background 1s ease-in;
-ms-transition: color .2s ease-out, background 1s ease-in;
-moz-transition: color .2s ease-out, background 1s ease-in;
-webkit-transition: color .2s ease-out, background 1s ease-in;
transition: color .2s ease-out, background 1s ease-in;
}

Answer 2

After a quick glance, I've spotted these problems in your page:
You're using the background-image CSS property as if it was background.
Inside the <div> contained in the <a> you have floating elements, which are considered to be outside of the normal element flow in your page, so your <div> ends up having a null height: you can "fix" this by adding the overflow: hidden; style to the <div>.
You should not put block elements (such as <div>) inside an <a> at all, that's not valid HTML.
You're trying to apply a CSS transition to the background property, but background is not animatable: http://www.w3.org/TR/css3-transitions/#animatable-properties
In short: rewrite the page, follow some good documentation and use the W3C Markup Validator.

Answer 3

I didn't take a deep look into your code but you're using the background property the wrong way.
Basically, change this:
background-image:url("http://spielconsulting.com/wp-content/uploads/2011/04/icon1.gif") no-repeat scroll 0 0 transparent;
to this:
background:url(http://spielconsulting.com/wp-content/uploads/2011/04/icon1.gif) no-repeat 0 0;
Check if it works... if so, you can add the "scroll" property if it's really necessary. I don't even know what that "transparent" thing is... backgrounds are transparent by default so it shouldn't be necessary. If you need to apply another background-color, do so before the url()...
Btw, this is how you should 'think' background shorthands in CSS (at least is how I use them):
background: color url() repeat fixed left top;
so:
background: #000 url(imgs/logo.png) no-repeat scroll 0 0;
In the example, instead of the #000 color, you could use transparent, but again, it's the default. But use it if you have another rule setting a color and you want it to be transparent.
Also remember that backgrounds can only be applied to "block" elements. If your element is not a block element, set it to, for ex.: display: block; or display: inline-block; set a width and a height to it and you should be good to go.