(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 [DATE]1305474564[/DATE] at [TIME]1305474564[/TIME] ---------------

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]

Originally Posted by TheWindows7Site

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]

Originally Posted by 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>
}

No it's not. Not what I was trying to do anyway