CSS, Technical

Background Image for Input Button with CSS (works in both Firefox and IE)

Posted on by Balaji Ramesh in CSS, Technical

I was having trouble with setting a background image for an input button in IE 6. The background-image property that worked in Firefox 2.0 just did not have any effect on IE6. After a bit of googling, I realized that the background-image property will not work on IE and that we need to use the background property. Here’s a snippet that works on both browsers:

<input type=”button” class=”button” title=”Background Image” />

.button{
      background: white url(‘images/imagebutton.gif’) no-repeat top;
      width: 150px;
      height: 40px;
      color:white;
}

33 thoughts on “Background Image for Input Button with CSS (works in both Firefox and IE)”

  10. This is great! However… the button now looks distinctly different than buttons with default style. I would like to have a button with a little icon on the left and with text on the right but other than that default styling. Any tips?

    Reply

  12. And now how do I get the psuedo class hover to work with it?

    Tried:
    .button:hover {
    background: white url(‘images/imagebutton-on.gif’) no-repeat top;
    }

    and no love.

    Reply

    1. I shall answer my own question: apply the :hover pseudo class to the element in question:

      .button:hover{
      background: white url(‘images/imagebutton_over.gif’) no-repeat top;
      }

      Reply
  19. Pingback: Background Image for Input Button with CSS (works in both Firefox and IE) « This part of my life is called: Being Myself « CFMeta

Leave a comment