using a washed out background image for content page

[johnnymac]

I am using dreaweaver to build a site i would like to have a washed out image as the background on some pages.
can any one tell me how this could be posssibly done.
one of the things i dont want to happen is to have a large image as the back ground making the website slow to load.

here is a example of one on another site http://www.csg.co.uk/index.php

[RodionGork]

1. You obviously need an image for background - as for its size, it depends on the image quality (for JPEG you can usually select this while saving). You may also load image with ajax just after page is loaded, though I do not think it is necessary.

2. One of the ways to get image "washed out" is to set its half-transparent. Google for "opacity" css style. (here minor problem with IE because of which I could not simply write the CSS rule.

3. As for setting background image - I believe there are several ways, for example use image inserted into BODY, with styles "position: absolute; width: 100%; height: 100%; z-index: -100;"

[Major Payne]

1) You can set your background image with CSS: CSS Transparency Settings for All Browsers

2) Or, you can use a good graphics editor and set the image itself with the percentage of opacity you wish to use.

3) 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 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".