Embed image in a <button> element

Question

I'm trying to display a png image on a <button> 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:

<button id="close" class="closing" onClick="javascript:close_clip()"><img src="icons/close.png" /></button>

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

Solution 1

You could use input type image.

<input type="image" src="http://example.com/path/to/image.png" />

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.

<button style="background: url(myimage.png)" ... />

Solution 2

If the image is a piece of semantic data (like a profile picture, for example), then use an <img> element inside your <button> and use CSS to resize the <img>. If the image is just a way to make a button visually pleasing, use CSS background-image to style the <button> (and don't use an <img>).

Demo: http://jsfiddle.net/ThinkingStiff/V5Xqr/

HTML:

<button id="close-image"><img src="http://thinkingstiff.com/images/matt.jpg"></button>
<button id="close-CSS"></button>

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:

Solution 3

The simplest way to put an image into a button:

<button onclick="myFunction()"><img src="your image path here.png"></button>

This will automatically resize the button to the size of the image.

Solution 4

try this

   <input type="button" style="background-image:url('your_url')"/>

Solution 5

Why don't you use an image with an onclick attribute?

For example:

<script>
function myfunction() {
}
</script>
<img src='Myimg.jpg' onclick='myfunction()'>

View more solutions

Comments

[Admin]

For me, it works perfectly... which is the context in you're experiencing this? Possible posting a few more lines of code?

[Sikshya Maharjan]

Can you reproduce this on a live site, such as JS Fiddle for us to see what's going on?

[ComFreek]

...and needs no JavaScript to submit the form.

[Wesley Murch]

-1: "Should" is too strong a term, since this isn't really what <input type="image"> is designed for. Why wouldn't you suggest CSS?

[ComFreek]

@ThinkingStiff <image> element? I think you mean <img> in your text ;)

[Amit Hagin]

I preffer to use a button. if I find no answer I'll do it. thanks

[Amit Hagin]

thanks for the good answer!! but the problem remains... I updated the question a little - maybe it can help you understand it bette.

[Andrew Barber]

Then style it, as noted in this and other answers.

[ThinkingStiff]

@AmitHagin I saw your update. Remember a button has borders, which are included in the calculation of its height. So to fit a 20px tall image, the button height would have to be 24px.

[ThinkingStiff]

@AmitHagin Also, to prevent whitespace issues, change your <img> to display: block;. I updated the demo link to show this.

[Rob Drimmie]

Are there any concerns about accessiblity/alt text with this method? I am really rusty, but is hiding the text by offsetting it by a few thousand pixels still the accepted workaround?

[ThinkingStiff]

@RobDrimmie Accessibility can be handled with alt or title. For SEO, there are all kinds of workarounds, including offsetting text, but I'm not sure which is the currently preferred method.

[Tamas Czinege]

Don't forget that both the starting end ending tags are required for the button element, so technically <button /> is not valid, it should be <button></button>.

[Panzercrisis]

These both load the image dynamically at runtime, right? The site goes ahead and gets off the ground in the meantime, doesn't it?

[BraveNinja]

<input type="image" worked like charm. Thanks a lot for sharing :)

[biphobe]

Your answer is incorrect, the official documentation says that it's allowed.

[Lars-Lasse]

This should be avoided though. A quick, dirty hack, sure, but not with accessibility in mind.

[Magnus]

If you use the CSS-approach, one gotcha is that you probably also want to specify background-size: cover in order to make the image cover the button. I was scratching my head wondering why my image was not showing up, until I realized only the transparent top left corner of it was actually inside the button...

[Logan Cundiff]

Nested interactive elements will fail accessibility check. (do not use this if it is a public site!). Source: dequeuniversity.com/rules/axe/4.3/…