Question

I’m struggling with a background image which is being cut off at the top by some unseen CSS or jQuery.

The background image is a custom button which I’ve added to a WordPress Feedburner Follow Plugin.

The site is http://www.robcaskie.com. The follow button which I’m struggling with is in the bottom right corner. I have added the background image so that it looks similar to the “share” button on the left hand side.

If someone can take a look and see why the image is being cut off at the top, I’d be really grateful! I’m tearing my hair out trying to find the problem!!

Thanks very much!

Answer 1

in this style definition:

#bit, #bit * {}
#bit {
background-image: url(http://www.robcaskie.com/wp-content/plugins/follow-button-for-feedburner/followtab.png);
background-position:right -10px;
background-repeat:no-repeat;
background-size: 102px 46px;
  bottom: -300px;
  font: 13px "Helvetica Neue",sans-serif;
  position: fixed;
  right: 10px;
  z-index: 999999;
  width: 102px;
}

this is the offending line which is placing the image 10px above the container:

background-position:right -10px;

it may be better to replace this with a padding-top and then readjusting the position of the tab.