I want to use a photo as the background image of my site where the photo fills the entire screen. The photo is 5184x3456 pixels and 5.89 MB. I don’t want the site’s visitors to have to download an image that large nor do I want the browser to scale it for me. The only solution I could think of was to create several copies of the image, each scaled to the most common screen resolutions, and have javascript determine which photo should be set as the background image when someone visits the site. Is there a better solution?
Hi targendaz2. Welcome to SitePoint. 
Firstly, you need to create a web-friendly version of that image (you can use Save for Web in Photoshop.) Consider, say, 300kb as a maximum image size for the web, though it should be a lot smaller than that ideally. %MB is out of the question.
So, a full-size background image? There are various JavaScript solutions for that out there, such as
Supersized - Full Screen Background/Slideshow jQuery Plugin
which is the best one I’ve found.
It can also be done with modern CSS (version 3), though this isn’t yet supported by all browsers:
CSS2 background 1280x960 center center fixed, CSS3 background-size cover
Thank you. I didn’t know there was anything out there that could do that.