CODEWITHSUNDEEP
htmlcsshoverbackground-image
stevenspiel
stevenspiel

Reputation: 5999

css background image won't display

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: image

Upvotes: 0

Views: 5503

Answers (3)

AlexP
AlexP

Reputation: 127

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;
}

Upvotes: 2

rafaelbiten
rafaelbiten

Reputation: 6240

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.

Upvotes: 0

jmc
jmc

Reputation: 538

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.

Upvotes: 1

Related Questions