how to stretch an image in background css property

Question

I am displaying a logo on in my header with the following css property:

background: url("images/ogo_b_s.gif") no-repeat scroll left top transparent
height: 92px;
width: 300px;

problem is that my original image is of high quality (4325 X 1450). However, for this image to fit in the above css width and height, I have to scale the image down to (257 X 87) and that reduces the quality of the image significantly. So much so that even the font in the image starts looking weird.

This image has transparent background and is put on top of another image.

I want to know whether there is some way to not scale the image down and have it fit the above css?

Answer 1

Two things:

1. Don't have CSS scale images. It does a poor job of this. Scale the image with some program that was designed to do the scaling on your own to the dimensions you want. Then CSS doesn't have to do anything.
2. 4325 x 1450 is huge! You want someone to have to download that whole thing just to see it at a tiny scale? If you rescale the image as suggested in #1 it will save your users from having to load the whole huge image (and save you some bandwidth).

Answer 2

You should create the background image specifically to fit in the area you are using it here; don't rely on the browser to do it.

And when you do that, you also might try using a PNG with its alpha transparency, which tends to scale better than GIFs when transparency is an issue.