CODEWITHSUNDEEP
widthcss
Georges Oates Larsen
Georges Oates Larsen

Reputation: 7102

CSS background-size-x property?

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?

Upvotes: 4

Views: 11399

Answers (3)

samvv
samvv

Reputation: 2134

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.

Upvotes: 15

Dave Hilditch
Dave Hilditch

Reputation: 5439

You can do this with the timthumb library - it can crop images which can achieve what you need. You need to install tim thumb (e.g. timthumb.php) and then change your image to point at your timthumb page and pass through the html encoded url of the image. It processes it, makes it the width you need without modifying the height of the image.

Upvotes: 0

Filip Roséen
Filip Roséen

Reputation: 63832

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 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.

Upvotes: 2

Related Questions