How to change my HTML input to div class - html

Question

How am I going to change my current input to div class? I would like to change my current user profile picture from the bottom design.
<input type="image" src="http://www.beirutnightlife.com/wp-content/uploads/2013/05/David-Beckham_89.jpg" name="image" width="85" height="85" data-toggle="modal" data-backdrop="static" href="#changepic" class="ttip_b thumbnail"></input>
<div class="round-pic2" style="background-image: url('http://www.beirutnightlife.com/wp-content/uploads/2013/05/David-Beckham_89.jpg');"></div>
CSS style
.round-pic2 {
display: block;
width: 100px;
height: 100px;
margin: 0em auto;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border-radius: 99em;
-webkit-border-radius: 99em;
-moz-border-radius: 99em;
border: 0px solid gray;
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
}
http://jsfiddle.net/yy6N5/

Answer 1

Try adding the class of the input type="image" as a selector:
.ttip_b, .round-pic2 {
display: block;
width: 100px;
height: 100px;
margin: 0em auto;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border-radius: 99em;
-webkit-border-radius: 99em;
-moz-border-radius: 99em;
border: 0px solid gray;
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
}
But I think, giving it an id attribute is better.
Cheers!

Answer 2

Just input{} or input[type="image"]{} will do:
Fiddle
input{
display: block;
width: 100px;
height: 100px;
margin: 0em auto;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border-radius: 99em;
-webkit-border-radius: 99em;
-moz-border-radius: 99em;
border: 0px solid gray;
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
}
Also you can add class on your input:
Fiddle
<input class="round-pic2" type="image" src="http://www.beirutnightlife.com/wp-content/uploads/2013/05/David-Beckham_89.jpg" name="image" width="85" height="85" data-toggle="modal" data-backdrop="static" href="#changepic" class="ttip_b thumbnail"></input>