CSS, Technical

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

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

  1. 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?

  2. 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.

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