Friday, July 16, 2010

Resizing Background to fit in any screen resolution without repeats

Ever wondered how to use actually picture like a photo or something in your background without worrying about how it will be rendered in various resolutions?
Here is a solution for the issue. It is possible using Jquery and CSS. The logic for this task is very simple: Detect the browser window width and height and assign those values to the background image.
Now here points to keep in mind are that the background image is not to be specified in CSS. For this task create a div with lowest z-index value and place your background image inside it using img tag. Also assign it an id.
You can detect browser width and height using jquery's width and height function as follows:
$(window).width()

Store these values in a variable and again use the same width and height functions to assign those value to the image. For that just replace the window in earlier example with reference to your background.
Have a nice day :)