Background Image Width

Question

This is my HTML:

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

user-avatar :

 #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; } 

The original user-avatar background image is 23x25, but I want it to be resized to 100x100px, and the problem is that everything I set in the width: xxx attribute will not work. The avatar, which is behind the scenes, always has its original size.

Answer 1

You cannot resize a set of images as the background of a container. The only way to resize the image is to use the img tag and resize it with css width and height attributes.

Look here , maybe this helps.

Answer 2

You can use background-size , but only the latest browsers are supported: https://developer.mozilla.org/en/CSS/background-size

Answer 3

You can use the CSS3 background size property for those browsers that support it, and then return to a compromise solution for older browsers. A compromise solution may be to set the background color to fill the space around the background image or use the background-repeat property for the tiled image.

For instance:

 #user_avatar { ... background: url(images/avatars/128.jpg) blue 50% 50% no-repeat; background-size: 100px 100px; }