I am aiming at opening a new website in June, but I am having very fundamental issues with my design that I am aiming to use. I am trying to have the background of my site be an image. But I have found that make sure the width and height works for everyone's resolutions is turning out to be impossible for me. I have tried using JQuery and CSS and neither methods seem to work. What I am looking for is a script using CSS (if there is no JQuery that would be preferred but i dont mind either way) that automatically re-sizes the image to fit the screen, no matter if the image is smaller or larger then the users screen resolution.
The CSS 3 background image resizing property does not enjoy good enough browser support to be usable, at least not as of the last time I checked. Maybe this have changed in the last year or two?
A much better strategy would be to create an image that doesn't need to be seen in its entirety in order to have the desired visual impact, and then allow browser windows of varying sizes to show as much or as little of that background image as they are able. Images that repeat on an axis can be used as well.
But if this requirement is 100% necessary, I'll see if I can whip up a script for you. Respond, and we'll see what we can do...
My goal was to have one image be my complete background (without repeat). I was using the CSS3 background property but the image went beyond the top of the screen in IE 8 and in Chrome. My most recent attempt was with using JQuery and some CSS and it works in every browser except IE.
I was thinking of creating a script that would run a diffrent BG if someone was using IE, but I have yet to find ANY method that works ok in IE.
I wish that Microsoft would just scrap IE, it would make my life SOOOO much easier. And to make things even worse, I am not able to test IE out on my own because I have a Mac, I am forced to have a third person check IE for :/.
Last edited by wesslayneb; 04-09-2011 at 10:45 PM.