There is no simple way to explain. The answer is more complex, but I shall try to give you a basic guideline.
You CAN make a single image and put as background. But you also should have in mind that your website will be visited by visitors that are using
different screen resolutions.
Today the most common used screen resolution is 1024x768 ( don’t take me for granted about this ), and for laptops - 1280 x 800 px.
Anyway if the width of your mainwrapper is 900 px, you can have additional 100 or 300 px ( 50 - 150 px to the left and to the right side ), that you can use for left and right parts of your background.
Your background image can, but doesn’t have to fill up all the width of the screen. You can leave some space, but body color in that case should mach the main color of your image so that no one can tell the difference.
How to implement background image ?
Example:
body {
margin: 0 50px 0 50px; /* this will wrap your body 50px from right and left side of the screen */
font-family: arial, verdana, helvetica, sans-serif;
font-size: 70%;
color: #000000;
background-image: url(../images/YourBackgroundPicture.gif); /* or jpg, png */
background-repeat: no-repeat;
background-color:#464d60; /* this should be a color which match the color of your image borders, so that no one can see the difference */
}
For the further work you can adjust the position of your image with margins ( like body margins )
About height of your image:
If your page is dynamic one ( change height ) you should match your body color.
I hope I gave you some ideas.
