Inline CSS - background position not working

Question

I'm trying to use inline CSS to style an image sprite. So obviously, I need background-position to work, but it's not. I'm not sure what's wrong. It's supposed to be a clickable image that links to another page of the site, but the CSS isn't working.

<div class="homepage"><a href="http://homepage.com/"><img src="http://imageLinkToHomepage.com/" style=background-image: "-20px;"></a></div>;

Answer 1

<div class="homepage"><a href="http://homepage.com/"><img src="http://imageLinkToHomepage.com/" style="background-image:-20px;"></a></div>

I think you had some quote marks mixed up there...

Answer 2

Looks like you're trying to apply the background-position property to an image tag, which won't work. Background properties won't apply to image tags. For your specific use case, you could apply a background image to your anchor tag without needing an image element - like so:

<div class="homepage">
  <a href="http://homepage.com" class="image-button"></a>
</div>

.image-button {
  display: inline-block;
  width: 55px;
  height: 55px;
  background: url('http://3.bp.blogspot.com/-q0CJBWRLWUs/T_z2_c7TunI/AAAAAAAABPk/rS7fmE1P-B4/s1600/megaman7.png') no-repeat 0px 0px;
}

.image-button:hover {
  background-position: -55px 0px;
}

View this in action here: http://codepen.io/anon/pen/PqKMLo

Answer 3

I was facing the same issue and I got it done by writing !important.No rule was overridden but css was not applying the position without making it important, seems like a bug.

<div class="ProposalBanner" style="background:url(...\imgs\BannerPRop.jpg) no-repeat center -31px !important"></div>