html - Positioning a whole image in a div element using background url without stretching -


i using div element render image using background url.

problem occurs when user uploads image face posing @ top, face cuts off during rendering on div element. tried using top center also, affects other user uploads image posing face @ center.

could please give me solution, in whole image of person should shown on div element without stretching, if face posed @ top, center or bottom.that great, thanks.

my code sample:

background: rgba(0,0,0,0.7) url(/image_vhpf1m.jpg) no-repeat center center; background-size: cover; 

here examples added animation.

.a4{background-image: url('http://vignette3.wikia.nocookie.net/halofanon/images/4/46/snowfall.png/revision/latest?cb=20100703100537'); background-repeat:no-repeat; background-size:100% auto; width:50%;height:100px;margin-left:50%; box-shadow:5px 4px 16px mediumpurple;} 

the image left img tag set original size.

the ones right have bg properties on them. click on them see happens when resized. link

http://codepen.io/damianocel/pen/bjympo


Comments