Sizing Background Image to User's Resolution

[truckworks]

Before I dive into the questions, here are some important notes: 
 
- I'm learning HTML & CSS as I go, this is fairly new to me 
- http://stackoverflow.com/questions/14471576/large-background-images-and-screen-sizes seems to address my question, but I don't think it will be a simple copy/paste into my files 
- HUGE SHOUTOUT to user mashby who has been helping me via PMs 
 
What I"m trying to do is create a static background that will resize within certain ranges (same idea as the stackoverflow link).   
 
I will need to have a separate image referenced for each of the resizing "zones", correct?  e.g. if your resolution is 1920 and the code pulls the 1920 background, I will need an image file for that specific resolution referenced.  If your resolution is 1366 and it pulls the 1366 background, I will need to have an image file that is 1366x728. 

[Antechinus]

Or you can just use the CSS background-size property to resize one image for all resolutions.

Mind you, it would probably still be a good idea to use a media query to pull in a smaller image for phones, since it'd be a bit bonkers making them download and cache a big image, but one image should be fine for all desktops and most tablets. You could throw the big one at phones too if you like. It just wouldn't be optimal.

Just make sure the big one is a jpg, and optimised down to the lowest byte count that still looks good.

And Mashby is evil. Don't trust that man.

[mashby]

And Mashby is evil. Don't trust that man.

[truckworks]

Or you can just use the CSS background-size property to resize one image for all resolutions.

This is why I come here, you peeps are genius (and know tons of stuff I have never heard of). 
 
So with the CSS that I've got, I should be able to size the background image to 100% of the user's border box area instead of just remaining a fixed resolution?

[Gwenwyfar]

You can use background-size: 100% 100% to stretch the background to its container size. If the container doesn't have limits it will cover the whole screen (such as using in the body)

[Antechinus]

Check these out. Should give you the idea.

http://www.css3.info/preview/background-size/

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

(Mozilla Developer Network is an excellent source BTW)