0

I've been banging my head against a brick wall for over an hour with this, and i'm sure it's something simple.

I have a new button with a plugin that I installed and I want it to look like all my other buttons. I pulled the same properties but for some reason it will not show the background image behind the text. It shows a tiny bit to the left of the text, then stops. If I select a background color it will show behind it, but images won't show. What am I missing? I have checked all css stylesheets that came with the plugin to see if they're interfering and none are related.

Here is my css:

 button.button-am {
 overflow:visible;
 width:auto;
 border:0;
 padding:0;
 margin:0;
 cursor:pointer;
 height: 28px;
 background-color: transparent;
 background-image: url(../images/bkg_btn.png);
 }

 button.button-am span { float:left; height:28px; padding:0 0 0 6px; font:bold 11px/25px Tahoma, Verdana, Arial, sans-serif; text-transform:uppercase; text-align:center; white-space:nowrap; color:#555; }

My coding from Magento is:

 <button class="button-am" type="submit"><span><?php echo $this->__('Save Name') ?></span></button>
  • are you sure ../images/bkg_btn.png is the correct path to image file? – Ozgur Bar Feb 3 '15 at 6:42
  • It is, I even ended up putting in the long path (and verified it in a web browser) but that didn't work. It is also the same path for my other buttons which work perfectly. – user3217495 Feb 3 '15 at 6:46
  • 1
    and what happens when you replace ../images/bkg_btn.png with http://wallpoper.com/images/00/31/33/51/black-background_00313351.jpg? still can't see it? – Ozgur Bar Feb 3 '15 at 6:48
  • Hmm, I can. Maybe it's my image then.. that's odd that it's working on my other buttons though. – user3217495 Feb 3 '15 at 6:51
  • you eighter give the wrong path or you think the image is not displayed because it's not positioned correctly. you probably have the path wrong. try images/bkg_btn.png for instance. – Ozgur Bar Feb 3 '15 at 6:52
2

UPDATE: It was a problem with my image. Thank you to all!

0

Try background-size:cover after background-image: url(../images/bkg_btn.png);

  • Unfortunately that didn't work – user3217495 Feb 3 '15 at 6:48
0

Your are missing the double quotes in url

Change

url(../images/bkg_btn.png)

to

url("http://placehold.it/150x150")

full demo

 button.button-am {
 overflow:visible;
 width:auto;
 border:0;
 padding:0;
 margin:0;
 cursor:pointer;
 height: 28px;
 background-color: transparent;
 background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
 background-size: contain; /*you may need this*/
 }

 button.button-am span { float:left; height:28px; padding:0 0 0 6px; font:bold 11px/25px Tahoma, Verdana, Arial, sans-serif; text-transform:uppercase; text-align:center; white-space:nowrap; color:#555; }
 <button class="button-am" type="submit"><span><?php echo $this->__('Save Name') ?></span></button>

background-image reference

  • quotes are optional – Ozgur Bar Feb 3 '15 at 6:44
  • Oops, you're right. Unfortunately that didn't fix it though. – user3217495 Feb 3 '15 at 6:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.