Web page creation: How do you add a colored background to only the sides of the page?

Question

I don't know much about web page creation but I've managed to put together a very humble site. While I'm glad I set my width to about 980 pixels, the sides are barren. I'd like to change the color of the background on only the sides with a slight gradient transition, like you see here on Yahoo answers. Is there a relatively straight forward way to do that such that a beginner could handle it?

Answer 1

What you see on both sides of many sites is either the background image or color set for the "body" tag only in CSS. Since you have a wrapper div set to 980 pixels, any background you set to the "body" tag in CSS will be seen on both sides and at top/bottom if you set any margin for the wrapper div.



Background Image Code:



For the body tag example:



body {

width: XXpx;

height: YYpx;

margin: 0 auto;

background: #fff url(image_name.jpg) no-repeat center scroll;

}



That is the proper CSS code for a non-tiled image where the contents scroll with the background image. Change "#fff" to preferred bg color. Change "scroll" to "fixed" if you want page contents to scroll over bg image. Be sure to set proper width/height to provide minimum page size to display bg image. Put the CSS as is on an external CSS file. If using embedded CSS, then place CSS between the style tags and place those style tags between the head tags of the page.



For a tiled image, change to:



body {

width: XXpx;

height: YYpx;

margin: 0 auto;

background: #fff url(image_name.jpg) repeat top left scroll;

}



Put that CSS on an external CSS file if you have more than one page. Put the CSS between the style tags and place them between the head tags if using it on one page. Style another tag other than the body tag if you are using a div wrap container. Should you want the contents of page to scroll over the background image, change "scroll" to "fixed".



Since you want an image gradient, then use an image slice of the gradient so you can repeat it for the whole page. The wrapper div will hide what is behind it unless you set its background to transparent.



You CAN use divs side-by-side to have images/colors on the left/right divs and something entirely different for the wrapper div. All easily done.



Ron

Answer 2

there is no way you can "change the color of the background on the sides only", but you can use a container div on the html body. Change the background color of your body. Then you can center your container div. You can do this by using css.



I explained this before, on yahoo answers. you can check that out.

Answer 3

adding that manually is outdated and nobody does it anymore, try to get Dreamweaver, you could change it with a click of a button,

Answer 4

There's no code to do this directly.. you simply have to create a background image like so:



http://l.yimg.com/a/i/us/sch/gr4/wide-site-bg.png



And then in your CSS background-repeat:repeat-y;