Background scales to any screen resolution

[JohorBahru]

as above, i'm trying to set my background same as vb.org. However, it only works for certain desktop resolutions. When i view my site from 1600x900 pixels, the background offset, but vb.org just presents perfectly. I'm wondering what to do and how to do it.. I hope somebody could help me:)

My offset background


Vb.org perfect background(doesn't affect by screen resolution)


the Extra CSS Attributes using is

Extra CSS Attributes
margin: 0px 10px 10px 10px; padding: 0px; background-position:center; background: black url(http://www.mydomain.com/misc/sitebackground.png) repeat-y top left



Main Table Width (pixels or percentage) is 1011

thank you very much:)

[Seven Skins]

Use 3 div's side by side or 3 column table.

.

[JohorBahru]

Use 3 div's side by side or 3 column table.

.

could please explain in more detailed way?
and where should i put the code in?
I dont know how to use 3 div since it is a jpg :(

[JohorBahru]

anyone know?

[Seven Skins]

e.g.

Add the code to the top of header code
<table align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="left_back.gif" alt="" /></td>
<td>


Add this to the bottom of footer code above javascript.
</td>
<td><img src="right_back.gif" alt="" /></td>
</tr>
</table>


Edit image code and background color of table accordingly.

.

[JohorBahru]

it seems to break the background image into 3 parts, but what i wanted to do is using 1 jpa like what vb.org does

https://vborg.vbsupport.ru/images/cstyle/blue/bodybkgd950px.jpg

https://vborg.vbsupport.ru/external/2011/05/44.jpg

[Phantasmagoric]

I think this is what you are looking for:


The background image is not resizing, it just looks that way due to the gradient, the forum is fixed width and the white within the centre of the background image matches the fixed width of the forum.

First off, set your forums width:

In the main css find this:
Main Table Width (pixels or percentage)
(This is the width of the table that contains all your vBulletin content)

In the data entry field add 800 (or 960 or what ever width you want, do not put 800px, just 800)


Create your background image and it bg.jpg (for this examples purpose), upload your background image to your skins misc folder

in the main css of your skin find:

Body (Customized in this Style)

Inline find:
Standard CSS Attributes
Background

In the data entry field overwrite existing content with this (change the #221F18 to what ever the colour is of the very last pixels left and right of your background image)
#221F18 url(images/skins/yourskinsnamehere/misc/bg.jpg) repeat-y fixed center top

[Seven Skins]

Extra CSS Attributes
margin: 0px 10px 10px 10px;
padding: 0px;
background: black url(http://www.mydomain.com/misc/sitebackground.png) repeat-y top center;

Try this.

[JohorBahru]

Thanks Phantasmagoric and Seven Skins, it is working fine now :)