Scaleable background image

I am attempting to use a large 1500x851 image for the background however when the page is dispalyed in differnt resolutions the image does not scale, i have attempted several ways to fix it in the template_css but i cant find a code that works after the background-repeat:no-repeat; ive tried background-size:cover; and tried setting width/height to 100% but nothing seems to work,

Any suggestion?

Background images are not re-sizable, you can have few background images prepared and then to select right one based on screen resolution using javascript.

I've done alot of research on the issue and apperntly in both CSS and PHP it is able to be done... but ive tried finding the correct location to insert the rest of the background paramerters and have been unsuccessfull here are a few links to what ive been looking at and can you take a look and tell me wither or not they just wont work?

css-tricks.com/3458-perfect-full-page-background-image/ css-tricks.com/3458-perfect-full-page-background-image/

Well as it looks (I never got into that subject before), you can put first solution and it will cover most modern browsers and also last jquery soultion to cover ie7, ie8 but with if statement

if(jQuery.browser.msie && jQuery.browser.version < 9){
...

do rest..

Thanks, Any idea where to apply the fix? ive been trying in the layout.css i beleive where the background image is defined or even in the style sheet not sure where exactly

first you can put in template_css.css, other jquery solution you should place in head section of index.php of template