I want to have huge background images on my site but without giving the user a hard time downloading them and the site looking ugly as the background loads.
They would be no bigger than 1920 X 1080 in size, however it's hard to say in terms of kilobytes/megabytes.
What are my options here and which are most effective?
I'm not too bothered about bandwidth, just want to user to think everything looks nice ;)
One option is to use multiple backgrounds. Have small background as bottom layer and cover it with larger background.
It might be tricky to have two backgrounds if you want it on body and want to support IE. Solution might be to start smaller body background use JS to change low-res background to high-res once it loads:
var i = new Image();
i.onload = function(){document.body.style.backgroundImage = 'url(' + i.src + ')';}
i.src = 'gigantic.jpg';
Keep in mind that such large background needs more RAM than some mobile browsers have (iPhones pre-3GS will either refuse to decode such image at all or will start purging cache/tab content in panic).
The latter problem can be worked around with CSS Media Queries:
http://lofotenmoose.info/css/destroy/media-queries-background-stretch/
Except query max-device-width instead of (virtual/zoomed) max-width.