Scalable Background Images

[jscheuer1]

Several folks have been asking about Scalable Background Images. I and others have been saying this is impossible. Technically that is true but, in IE this worked out:

<style type="text/css">
body {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/dahlin/curlyansp.png', sizingMethod='scale');
background-color:#000000;color:#eee4ee;
height:94%;
}
</style>

Here is a demo. IE only and best with a crisp uncomplicated image.

[neilkw]

I found this resource in relation to the image scaling.
http://www.bigbaer.com/css_tutorials...l.tutorial.htm

[Twey]

But it isn't a background image.

[neilkw]

Yeah, but I found it helpful and it is along the same lines.

[neilkw]

ok, I'm quite interested in this concept...
This has a scaled bg image but it's not particularly pretty..
http://webwiz.sitetechnique.com/scal...background.htm

I'll be quiet now .

[Twey]

But it's still an <img>, not a background image

[jscheuer1]

ok, I'm quite interested in this concept...
This has a scaled bg image but it's not particularly pretty..
http://webwiz.sitetechnique.com/scal...background.htm

I'll be quiet now .

Works in Opera but, in FF and IE, when the window gets narrow in proportion to its height, white space appears at the bottom. A promising effect, I will take a look at the code and markup later.

[jscheuer1]

After looking at this a bit more, I think Opera should be left to use this (from previous post) method. IE should have the 'background' division's style set to display:none and use the filter method I outlined. That leaves FF. The problem there (and with IE if the filter method is not used for it) is that the browser just doesn't get height:100% so sets the height of the image as the image's native aspect ratio in relation to the browser's width. This makes the bottom of the image get cut off in certain situations and makes white space appear at the bottom in others. I think I would use a script to set the image's height to the value of window.innerHeight. I would do this onload and onresize but, as this is script, I would only do it in browsers that support that method and that are not Opera. Leaving Opera to scale the image using only the markup (which it seems quite capable of doing) and IE to employ its filter.

[jscheuer1]

I played around with this a bit and came up with this x-browser demo. It uses no javascript, and the style has been simplified from the previous demo of neilkw, except for the addition of some IE only style. Since I am using the filter method for IE, some (documented in the source) adjustments were made for other browsers. The foreground division can be treated as the second or actual 'body', as it is in the normal flow of the page. The background is fixed and scales to fit the window size in real time.

[jscheuer1]

I thought I should add that in Opera, during resizing, the layout can sometimes jump about and even get stuck out of alignment until a refresh or further resizing (making the foreground absolute fixes this and will have little consequence I believe). The actual image canvas is padded on the right to compensate for IE's tendency to cover a portion of it with the scrollbar. This necessitated some fine tuning for other browsers. OR, separate images could be used.

/EDIT: I've just updated the demo to fix this Opera problem.