When I wanted to stretch a background image on my website so that it always fills the available window area regardless of resolution, I initially used background-size:cover;. Unfortunately, Internet Explorer doesn't seem to support valid CSS, so I had to resort to:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/bg.jpg',
sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/bg.jpg',
sizingMethod='scale')";
After implementing this solution, the background stretched properly. However, I encountered an issue where all input fields stopped working for some reason—it seemed like they were behind an invisible element and no longer clickable or selectable. Does anyone have ideas on how to resolve this?
I understand that using JavaScript to manually set the image dimensions on window resize is an option, but it's not as seamless as the CSS alternative, especially when considering the need to calculate image dimensions and ensure proportional scaling.