How to add an image to a custom CSS button - html

Question

I have the following button HTML code:
<button class="button" style="width: 95%;">PHYSICIANS</button>
It is customized by CSS3 here:
button {
border: 1px solid rgba(0,0,0,0.3);
background: #eee;
color: #515151;
font-size: 24px;
font-weight: 700;
padding: 21px 34px;
text-decoration: none;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.21, rgb(203,203,203)), color-stop(0.58, rgb(227,226,226)));
background: -moz-linear-gradient(center bottom, rgb(203,203,203) 21%, rgb(227,226,226) 58%);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 0 5px rgba(255,255,255,0.3) /* glass edge */, inset 0 1px 0 0 rgba(255,255,255,0.5) /* top highlight */, inset 0 -3px 0 0 rgba(0,0,0,0.5) /* bottom shadow */;
-webkit-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 1px 0 0 rgba(255,255,255,0.5), inset 0 -3px 0 0 rgba(0,0,0,0.5);
box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 1px 0 0 rgba(255,255,255,0.5), inset 0 -3px 0 0 rgba(0,0,0,0.5);
text-shadow: 0 1px rgba(255,255,255,0.6);
}
button::-moz-focus-inner, a.button::-moz-focus-inner {
padding:0;
border:0;
}
button:hover, a.button:hover {
background: #cbcbcb;
cursor: pointer;
}
button:active, a.button:active {
background: #ccc;
padding: 22px 34px 20px;
-moz-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
text-shadow: none;
}
Which displays the following button:
How can I modify the above code, so I can add a thumbnail image to it. Something like this:
The default image size is 260X190 but I want to size it up so it fits inside the button.

Answer 1

You can use the pseudo-element :before to do this.
See this working demo I made: http://jsfiddle.net/A7UsX/1/
button:before {
content: " ";
display: inline-block;
background: url("http://www.wdc.com/Global/images/icons/icon_supporthelp.gif") no-repeat;
height: 30px;
width: 50px;
}
I have made a red background to show you what I did. Change the background to the image you would like and change the height and width to your likings.

Answer 2

you could use :before pseudo element.
button:before{content: ' '; display:inline-block; position:absolute; content:url(http://lorempixel.com/25/25); }
I'll suggest you to use a SVG image rather than using jpg or png format. so in this case you can call the image using background-image and give a positioning too.
button:before { content:''; display:inline-block; height:1em; width:1em;
background-image:url('images/image.svg'); background-size:contain; background-repeat:no-repeat; }
here you can check the working Demo. http://jsbin.com/damujidi/1/edit

Answer 3

You can add a <i> as commonly used in bootstrap [ref1] [ref2].
<button class="button">
<i class="btnbg"></i>PHYSICIANS
</button>
CSS:
.btnbg {
background-image: url('http://i.stack.imgur.com/QgIOj.png');
background-position: bottom left;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
height: 35px;
line-height: 35px;
vertical-align: middle;
width: 70px;
}
.button {
line-height: 35px;
vertical-align: middle;
}
see jsFiddle