Embed image in a button element

Question

I m trying to display a png image on a  lt button gt  element in HTML  The button is the same size as the image  and the image is shown but for some reason not in the center - so it s impossible to see it all  In other words it seems like the top right corner of the image is located at the center of the button and not at the top right corner of the button   This is the HTML code    lt button id  close  class  closing  onClick  javascript close clip    gt  lt img src  icons close png    gt  lt  button gt    Update  What actually happens  I think  is a margin problem  I get a two pixel margin  so the background image is going out of the button  The button and the image are the same size  which is only 20px  so it s very noticable     I tried margin 0  padding 0  but it didn t help

User · Answer

Buttons don t directly support images  Moreover the way you re doing is for links     Images are added over buttons using the BACKGROUND-IMAGE property in style  you can also specify the repeats and other properties using  tag  For example  a basic image added to a button would have this code        lt button style  background-image url myImage png   gt    Peace

User · Answer

The simplest way to put an image into a button    lt button onclick  myFunction    gt  lt img src  your image name here png  gt  lt  button gt    This will automatically resize the button to the size of the image

User · Answer

The topic is  Embed image in a button element   and the question using plain HTML  I do this using the span tag in the same way that glyphicons are used in bootstrap  My image is 16 x 16px and can be any format  Here s the plain HTML that answers the question   lt button type  quot button quot  gt  lt span gt  lt img src  quot images xxx png quot    gt  lt  span gt  amp nbsp Click Me lt  button gt

User · Answer

try this      lt input type  button  style  background-image url  your url     gt

User · Answer

Add new folder with name of Images in your project  Put some images into Images folder  Then it will work fine    lt input type  image  src    Images Desert jpg  alt  Submit  width  48  height  48  gt

User · Answer

Why don t you use an image with an onclick attribute   For example    lt script gt  function myfunction        lt  script gt   lt img src  Myimg jpg  onclick  myfunction    gt

User · Answer

Try like this format and use  width  attribute to manage the image size  it is simple  JavaScript can be implemented in  element too    x000D   x000D   lt button gt  lt img src    gt  lt  button gt  x000D   x000D   x000D

User · Answer

If the image is a piece of semantic data  like a profile picture  for example   then use an  lt img gt  element inside your  lt button gt  and use CSS to resize the  lt img gt   If the image is just a way to make a button visually pleasing  use CSS background-image to style the  lt button gt   and don t use an  lt img gt     Demo  http   jsfiddle net ThinkingStiff V5Xqr   HTML    lt button id  close-image  gt  lt img src  http   thinkingstiff com images matt jpg  gt  lt  button gt   lt button id  close-CSS  gt  lt  button gt    CSS    button       display  inline-block      height  134px      padding  0      margin  0      vertical-align  top      width  104px      close-image img       display  block      height  130px        width  100px      close-CSS       background-image  url   http   thinkingstiff com images matt jpg         background-size  100px 130px      height  134px        width  104px      Output

User · Answer

You could use input type image    lt input type  image  src  http   example com path to image png    gt    It works as a button and can have the event handlers attached to it   Alternatively  you can use css to style your button with a background image  and set the borders  margins and the like appropriately    lt button style  background  url myimage png         gt

[html] Embed image in a <button> element

Examples related to html

Examples related to css

Examples related to image

Examples related to button