CSS - Can I resize the background image by changing the width and height?

Question

Hello all,

Given the following CSS rule,

#block1 {
 text-indent: -1000em;
 background: transparent url(../images/xxx.png) no-repeat scroll center center;
 width: 100px;
 height: 50px;
 display: inline-block;
}

Assume the image xxx.png is of dimension 100px by 50px. If I need to make this image displayed on #block1 looks smaller, can I simply change the width and height of #block1 or I have to first re-size the image and then change the width and height of the #block1 accordingly.

thank you

Answer 1

no, the image will just appear to be cropped.

Answer 2

CSS can only position the image, not adjust it. If you absolutely needed to resize the image through CSS, you'd have to have the image actually inserted as an img tag, then position it behind the content. It's best just to edit it.

Answer 3

You can't in CSS1 and 2, but CSS3 supports the background-size property, which if you set to 100% should give you what you are looking for.

However, you probably should just resize the background image though, unless you have a compelling reason not to :)