Auto Fitted Fixed Backgrounds

[discodoran]

Auto Fitted Fixed Backgrounds

Hello i am trying to get the background on my forum to fit the screen of every browser resolution without missing parts on the left and right side. I thought that a Width: 100% Height: 100% rule would sort that out but i need the forum to be fixed to the page so that it does not scroll with the page. Cuttently i have the following set in the stylevar under doc_background

> Background Image Horizontal Offset: Fixed
> Backtground Image Vertical Offset: Top

Is there anything i can add into the additional css to stretch the image to the whole background? I noticed the doc_background being referenced in the vbulletin.css so i decided to add the following after it to no avail.

/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;

/* Set up proportionate scaling */
width: 100%;
height: auto;

/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}

position:fixed;
top:0;
left:0;

/* Preserve aspet ratio */
min-width:100%;
min-height:100%;
}

I was wondering if anyone had the same problem or would they have a solution to this problem.

[Emeralda]

I'd like to know that too. In vB3 I could just add the additional css in the styles editor, but in vB4 all I get is this limited functionality: http://prntscr.com/7vukb

How would I go on about adding things like fixed, centre, stretching or not, etc.

[Adam H]

I would imagine you would need to do something like :


html {
background-attachment: fixed;
background-color: transparent;
background-image: url("images/background.jpg");
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100% auto;
}

Something like that should work, Havent tested it but you should be able to tweak it from there.

[Emeralda]

Rawr, thanks. Now, is there a way to make two backgrounds? What I have in mind, one would be a fixed background, and the other on top of it, and moving normally. One acting like this: http://prntscr.com/7vy59 and the other: http://prntscr.com/7vy8a