My images are for the backgrounds. They are not hugely complex and should not take up one megabyte. I am using the Adobe PS for this. How do I downsize images so that it takes up a moderate amount of KB's as opposed to a whole megabyte?
Have you tried to save them as JPEGs? You should be able to select a compression factor. Higher compression means smaller files, but with a loss of quality. It might take some trial and error to get the right balance.
Yes I saved them as PNG files. They were about 1 mb in size and took a moment to load on a slower connection. The options for file formats included bitmap tiff and PNG. I am used to jpg, jpeg, gif and png so I chose png. not certain that a browser would display tiff or the photo shop file extension type formats.
The size I save was the actual size I wanted it to display. I am not certain how to display a background image and control the size. With an img tag you have height and width attributes but with the style attribute background-image you do not have the option of resizing it that I know of. Scaling the image down to 1/3 or so of its actual size would work. But it would display that size and not display properly. For example if you have a large screen size by width. You'll see... even at 1000 pixels of horizontal resolution the image repeats itself on the right of the screen http://www.joerdesigner.net/Sitemap/employers.html
I'm not a Photoshop guy, but I know it can definitely save images as JPEGs. There may be a need to reduce color depth first, but the online help or a Photoshop forum would help you with that.
Now, if I understand you right, you want your background image to scale based on the browser window size. I don't know how to do that directly, but if instead of using a background image, you just defined a regular image right under the body tag, and gave it a class background, then this CSS should do the trick for you.
The z-index 0 should (I think) make the image paint behind anything else in the window.