Hide image content that is outside current view without squishing image - css

Question

I have an img src that I use as background. Using this css: (image is 1920x1080)
.bg {
position: absolute;
z-index: -1;
width: 100%;
min-width: 1920px;
}
And this does what I want for desktop, upscales accordingly for higher res, and when I shrink the window, it only does some of what I want. The width is still kept (which is good), but I want it to not be scrollable to the sides, and I want the image to be cenered on the new resolution.
So here is an image of how it looks when I resize now, where red area is the current resolution, and the blue area is still scrollable.
http://i.imgur.com/7VJfKPW.jpg
And here is an image of how I want it to look, where the black area is simply empty, the user is not able to scroll to the sides, they can only scroll down if there is content there, and only scroll to the side if there is content there (except for the image itself) and of course the image is as well centered on the new resolution.
http://i.imgur.com/O3sLE31.png
Anyone have any idea of how I can accomplish this? Thanks.'
EDIT: more detailed mockups
So here it is in desktop resolution: http://i.imgur.com/Z8x4e3I.jpg
Here is mobile-ish resolution, where you can see you are able to scroll all the way to the end of the image size to the right: http://i.imgur.com/Y3bC2DI.png
And here is how I want it to be, where the image has been centered, and you are not able to scroll to either side, and all this has to still enable the image to grow in size when the window is bigger than 1920x1080 as well: http://i.imgur.com/7d2vpRK.png
EDIT: tl;dr I want background image to always fit the size of the browser window, even if the user has a 4k monitor, or a 1080p, or a mobile phone, but when we have to shrink the image, the page can't be scrollable to the sides. And the image will usually be 1080p.

Answer 1

the background-size element takes care of that
Just use
background-size: cover;

Answer 2

updated jsfiddle: http://jsfiddle.net/Uz5AY/4/.
* {
margin: 0;
padding: 0;
}
body {
background-image: url(http://placehold.it/1900x1080);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
#container > .content {
width: 70%;
margin: 20px auto;
background-color: rgba(255, 255, 255, 0.7);
}
#container > .content > p + p {
margin-top: 20px;
}