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

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

About these ads

33 Responses

  1. helpful. thanks.

  2. I was searching a solution to this stupid problem for few hours. Thank you so much. Now it works for me.

  3. Excellent ! Many thanks.

  4. Thanks for sharing ;-).

  5. Thanks !

  6. Very nice one

  7. thank you that helped me ;)

  8. Nice Code

  9. Great post!!!! Thanks for sharing… :)

  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?

  11. you should consider having an input [image] instead…

  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.

  13. How about handling the over state of the input button?

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

  14. Great, thanks for the hint, saved me a lot of time!

  15. Nice one! I’ve been looking for this for a few hours.

  16. Thanks it worked!! :) :)

  17. Thanks!

  18. Excellent post – saved me some time also.

    Thank you!

    bc

  19. [...] via Background Image for Input Button with CSS (works in both Firefox and IE) « This part of my life is…. [...]

  20. Thanks a lot!

  21. hey many thanks its really helpful to me :)

  22. Thank you SO much! Easy example and quick to fix.

  23. I also set border to none

  24. Thanx

  25. Very useful, thanks!

  26. Caveat – If you are using more then one submit button, then this won’t work on internet explorer,

  27. Thanks, Nice example

  28. Yes thanks too

  29. Thanks you for your tip!

  30. Yes, this was it. Thanks.

  31. Thanks, nice trick

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: