(Creating styles) Background Image Question

[HMBeaty]

Hopefully this is something simple, but I'm playing around with some different style customizations and am curious to if the background image can be "stretched" to fit the members/users screen. Right now, I'm using images with a dimension of 1600x900 and obviously, on small resolution screens, some of that image would get cut off. So, is this possible to do? If so, how would I go about editing this?

--------------- Added 1305474564 at 1305474564 ---------------

Ok, I THINK I've basically narrowed it down to this:
.XXXXXXX
{
background-image:url('images/mybgimage.jpg');
width: 100%;
position: absolute;
top: 0;
left: 0;
}
But how do I get it to work with the stylevar doc_background? Anyone know?

[LifesGreatestGift]

you would need to use javascript to accomplish this effect.

[HMBeaty]

you would need to use javascript to accomplish this effect.
Not entirely true. You COULD do it using javascript, but I was aiming more at doing it with CSS, which I figured out how to do, placing this code in additional.css:
html {
background-attachment: none;
background-clip: border-box;
background-color: #FFFFFF;
background-image: {vb:stylevar doc_background};
background-position: 0 0;
background-origin: ;
background-repeat: none;
background-size: 100% 100%;
}

[Lynne]

Not sure why you have to add it when it's already there in vbulletin.css:

html {
background:{vb:stylevar doc_background};
<vb:if condition="is_browser('opera') && $stylevar['textdirection'] == 'rtl'">
overflow-x: hidden;
</vb:if>
}

[LifesGreatestGift]

I meant along the lines of using js to figure the users screen size, then assign a bg based on that so you wont be distorting the image.

[HMBeaty]

Not sure why you have to add it when it's already there in vbulletin.css:

html {
background:{vb:stylevar doc_background};
<vb:if condition="is_browser('opera') && $stylevar['textdirection'] == 'rtl'">
overflow-x: hidden;
</vb:if>
}
No it's not. Not what I was trying to do anyway