1

If I put the regular img tag in html, I can basically specify width and height and browser will scale the image. As long as dimensions are not too far off from the original, the result is decent.

For example, the avatar image is scaled to 32x32 even though original is 45x45

<img width="32" height="32" alt="" src="http://www.google.com/friendconnect/scs/images/NoPictureDark.png">

Is there any way to scale the image in the css background-image, like this?

<div class='avatar' style='background-image:url("hhttp://www.google.com/friendconnect/scs/images/NoPictureDark.png");'>

I basically want to show avatar as a property of background-image instead of usual img tag and also need to scale it to size.

Is there any known trick that can do that?

Dmitri
  • 34,780
  • 9
  • 39
  • 55
  • possible duplicate of [Stretch and Scale a CSS image Background - With CSS only](http://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-background-with-css-only) – Daniel A. White Mar 08 '11 at 17:59
  • [Duplicate](http://stackoverflow.com/questions/376253/stretch-and-scale-css-background). – melhosseiny Mar 08 '11 at 18:01

1 Answers1

3

This is only possible in CSS3 using the background-size property. See spec and compatibility table.

melhosseiny
  • 9,992
  • 6
  • 31
  • 48