CSS background-size-x property?

Question

I am trying to set the width of a background image -- without modifying the height of said image. Is there a way to do this?

Answer 1

The selected answer is wrong, I think. You can do it using pure CSS 3 only, using background-size: 100% auto for an auto-inferred height or background-size: auto 100% for an auto-inferred width. The ratio will remain constant. Only if you use background-size: 100% 100% (abbreviated as background-size: 100%) does the ratio change.

Answer 2

Prior to CSS3

To have full control of the background image you could create a div with a really low z-index and position:absolute; top:0; bottom: 0; to make everything float above it.

If you don't want to hard code the height of your image you'll need to use javascript to do the stretching, otherwise it will just scale according to the ratio between width and height.

---

CSS3

In css3 you can use the property background-size, but it's the same thing here.. you'll need to use javascript if you don't want the image to scale according to the ratio between width and height.