Background image width

Question

This is my HTML:

<div id="user-avatar"><img src="/imgs/frame.png" alt=""/></div>

user-avatar class is following:

#user-avatar {
     width: 100px;
     height: 100px;
     margin: auto;
     position: relative;
     background: url(images/avatars/128.jpg) 50% 50% no-repeat;
}

Frame:

#user-avatar img { 
     position: absolute; 
     top: 50%; 
     left: 50%; 
     width: 122px; 
     height: 127px; 
     margin-top: -62px; 
     margin-left: -63px; 
}

Original user-avatar background image dimensions are 23x25 but I want it to be resized to the 100x100px, and the problem is that whatever I set in the width: xxx attribute it'll not work. The avatar that is behind the frame has everytime his original dimensions.

Answer 1

You can't resize an image set as background of a container. The only way you can resize a image is using a img tag and resizing it with width and height css attributes.

Take a look here may be it helps.