How to make a background image.

[mrconfus3d]

I see on almost every site Including this one, that the body background is a very large image sometimes 2400 by 1600 that automatically contracts and expands to the users resolution. How would this be done? Also, how do users know exactly where to make the sides for the background?

This is probably the best image i can get.
http://www.playdota.com/forums/assault_fps/misc/skin/bodybg.gif
Now thats the forum body background.

[mrconfus3d]

bump....help?

[mrconfus3d]

wow noone knows?:mad:

[Sean S]

I'll recommend that you do some reading and learning more about HTML and CSS, but I'll try to summarize it for you as best as I can.

Basically you have to create a small image, that when repeated either in Y or X axis, it would look the same.

so for example, in the case of the design here at vb.org, it would be something like,

body {
background: url(pattern.gif) repeat-y top center;
}

the background calls for a background image
repeat-y, repeats the image you created in Y axis
top: starts the first image from the top
center: places the image in the center

hope that helps.

[mrconfus3d]

I already am aware of that. I am trying to make for example, a 2000 by 1600 image, fit on a 1440 by 900 monitor. Just one image. And im pretty sure thats possible.
Also, what about making a table, with a couple images that makes that one image. And all that cells within the table contract and expand according to the resolution. Im talking images, not colors or patterns that can be repeated.

Thank you

[Sean S]

yes you could do that, I all you have to do is create the image and set it as background, however, instead of setting it to repeat-x, or repeat-y, you should set it to something like

body {
background: url(image.gif) no-repeat top center #000;
}

one thing you got to make sure though, is that you have to make sure the edges of the big image that you create, fade into a solid color. That way, you can set a main background color and have the image merge in it.

I could probably help you out more if you show me the design that you have or trying to accomplish.

[mrconfus3d]

Thank you very much for you information. I will report back soon with results.