Hi
I’m trying to find a way to make a background image resize vertically, so you always see the full height of the image and it always fills the viewport. It needs to resize proportionally but it doesn’t matter if it fills the screen horizontally or not.
I’ve managed to do a background resize, but it just makes the image fill the screen horizontally, and loads of it gets cut off at the bottom.
I’m using this: Anystretch but have tried other methods, none of which seem to work.
Would be nice to do it with pure CSS, but I’m not averse to Javascript.
Thanks
CSS won’t be able to do this nicely, but you could set an <img> in the HTML, AP, top:0;left:0; and set the width/height to 100%
It will scale horribly probably and look very very bad in many resolutions, but there you go.
Edit-I don’t know if above will remain true if the user resizes the browser window, though I can’t be bothered to go check right now. I think it’d still be true.
Thanks. It does actually scale fine if I don’t put anything at all for the width. Just realised that trying to make it behave as a background image is a bit dim though, as I don’t actually want the content to flow over the top of it when I resize. Maybe some media queries will save the day.
If you wrap everything on the page in a wrapper, and give that position:relative;z-index:1;, there is no way that the image could overlap the content.
Excellent. Any way to fix the position of the image so it doesn’t scroll with the content?
Thanks
You’d need to set it with position:fixed instead of position:absolute
However it won’t work in IE6, if you still care about that browser. You’d need expressions or another JS solution
Of course:) Thanks very much for your help.
I’m not sure I do still care about IE6, no.