how to make a webpage have a picture for the background on the sides?

Question

Please take a look at the following link. This is an example of what I am trying to accomplish. I am making a website and I want the sides of the page to be a picture instead of a color. Let's say the page is 800 pixels wide but the resolution of the monitir is 1024 pixels, what I want to happen is I want the filler space to be filled with an image I choose. I just don't know how to do it. I would appreciate any help at all.
http://www.gamespot.com/xbox360/index.html?tag=nav-top;xbox360&navclk=x360

Thanks,

Answer 1

This kind of formatting used to be handled by the TABLE tag. But! Thankfully Cascading Style Sheets are here to save you from the hair tearing, teeth gnashing and strange noises us 'old skool' webbies were well known for.
Using the 'background-image' CSS property you can add an image that scrolls with the text, or using 'background-attachment' the image will remain in place while the text scrolls, a neat effect for free.
I'm certain that you will find all you need, and more should you choose to follow the links below...
The second link defines the exact layout you request, good luck with your webdesigning (0:

Answer 2

First thing they did was create the image with a blank area in the center. They took the size of that blank area and put it into their stylesheet: http://image.com.com/gamespot/shared/gs5/css/standard.css

If you look in that stylesheet, under the section commented as BODY, they have an item called #body_shell, which has a width of 760px. They also made the background image to repeat-y and be located in the center of the page.

If you look in the source for the original page you linked to, you can find this item in

Answer 3

With a large image this can be done with tables.

Set the image as the background. THEN add a table, but put the background of the TABLE to be solid white. Set the width of the table to be less than the width of the pic, and set it to be centered on the page. The table will "mask" out the center of the photo, thus giving you the 'break' you want.

Answer 4

In your css set your body as this -

body { background:url(enter the path to the image here); background-repeat:no-repeat; }

Be sure the image is at least 1284x1024 pixels; even though most people are using 1024x768, it's good to have the next size up for folks like me who use the large res.

Let me know if you need any more help, like with CSS too; you can email me through my profile page.

Answer 5

Get the picture you want to serve as your background and just fill in a gap in the middle... if you don't want that, just divide your image in 2 and leave a gap in the middle and fill it black in photoshop.
*** Just align the body of the page in your HTML. Ajust the width to make it fit in the gap you made.

If you don't get what I mean, right click the background and click "View Background Image"

Answer 6

Using divs and css would do the job. Just have 3 divs. two side and one in center for the content.

Answer 7

Just make sure that your image is large enough to support high resolution users. I can't imagine you would want your image to tile.

Answer 8

its not always good to set the picture to be wallpaper in the web, its better to save it to pc first. plus. if you cant save a pic to your pc since its locked or something, you can just press "print screen" in you keyboard , open paint and paste the screenshot there, then edit the image and later save it in jpg or other format.s

Answer 9

Create a image as http://i.i.com.com/cnwk.1d/Ads/369/12/Final_EA_Crysis_GS_Skin.jpg
, with same size. and in the style sheet

html {background-properties: fixed}

that is done