7 {{ upvoteCount | shortNum }}
7 {{ upvoteCount | shortNum }}

Putting a .png image into a CSS button?

by shipwrecked
6 replies
  • WEB DESIGN
    • |
Hi,

I'm experimenting with an icon that I want to place inside a CSS button.
The button works fine, but the icon just doesn't want to appear. I've tried various ways (I can do it with "input")...

But I want to do this in CSS...

I already have this CSS for the button:

Code:
  .button {
    width: 36px;
    height: 20px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding-top: 10px;
    padding-bottom: 5px;
    border: 1px solid #057fd0;
    border-radius: 8px;
    background: #992828;
    background: -webkit-gradient(linear, left top, left bottom, from(#33bdef), to(#03789f));
    background: -moz-linear-gradient(top, #33bdef, #03789f);
    background: linear-gradient(to bottom, #33bdef, #03789f);
    font: normal normal bold 16px arial;
    color: #ffffff;
    text-decoration: none;
    }

.button:hover {
    border: 1px solid #057fd0;
    background: #992828;
    background: -webkit-gradient(linear, left top, left bottom, from(#3de3ff), to(#0490bf));
    background: -moz-linear-gradient(top, #3de3ff, #0490bf);
    background: linear-gradient(to bottom, #3de3ff, #0490bf);
    color: #ffffff;
    text-decoration: none;
}
.button:active {
    background: #982727;
    background: -webkit-gradient(linear, left top, left bottom, from(#1f718f), to(#03789f));
    background: -moz-linear-gradient(top, #1f718f, #03789f);
    background: linear-gradient(to bottom, #1f718f, #03789f);
}
#button #css #image #png #putting
  • Profile picture of the author RobinInTexas
    We would need to see an example page to give advice on this.
    Signature

    Robin



    ...Even if you're on the right track, you'll get run over if you just set there.
    {{ DiscussionBoard.errors[8690237].message }}
    • Profile picture of the author maddyharber
      backgroundimage:url( "name.png");
      {{ DiscussionBoard.errors[8703286].message }}
  • Profile picture of the author Andrew H
    have you tried...

    HTML Code:
    background-image: url(../your/directory/image.png);
background-repeat: no-repeat;
    Signature
    "You shouldn't come here and set yourself up as the resident wizard of oz."
    {{ DiscussionBoard.errors[8691025].message }}
  • Profile picture of the author project1010
    Try this - background:url(images/img.png) no-repeat left 4px;
    {{ DiscussionBoard.errors[8691193].message }}
  • Profile picture of the author OaldDesign
    You should probably use this code
    background-image: url(image.png);
    you would need to use background-image and not background so it won't interfere with the other background code you have.
    Signature

    Graphic Design & Web Development Services: http://www.oalddesign.com
    Banner Design Services: http://bannercheapdesign.com

    {{ DiscussionBoard.errors[8691884].message }}
  • Profile picture of the author shipwrecked
    I left it with the "input" and it seems to work fine.
    {{ DiscussionBoard.errors[8701215].message }}

Trending Topics