White Space on Larger Monitors When Background Image ends - html

Question

I am using Bootstrap, HTML and CSS for my website. I built it on my Macbook Pro, and now when I move to my desktop monitor (which is much larger), there seems to be a large white space on the right side of the web page due to the monitor being much larger in width.
The height is working perfectly fine and it scales well, but it seems like right when the image ends (width) the site wants to keep going, but is not stretching the image to fit the larger monitors horizontally (width).
How can I fix this?
Image of Website Problem:
This is what I came up with so far.
body {
background-image: url("http://i.imgur.com/vDF3k2s.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
overflow: auto;
font-family: Lato;
}
html {
height: 100%;
}
I appreciate all suggestions, thanks!

Answer 1

Without your HTML code, I can't exactly replicate what you are doing, so I will have to assume some things... always dangerous! LOL!
Anyway, I will first tell you what I believe is going on, then I will explain some things to do to combat that, and then I will provide the actual code, based off of the code you have already supplied.
Ok, I believe what is happening is that since you haven't specified where within the body you want the background image, by default the browser is giving you the image at 100% of it's original size and floated to the left.
In order to get a fullscreen image, which is what I believe you are shooting for, I would first place the background image within the "html" tag instead of the "body" tag. Second, I would let the browser know that you want the image to be centered and not to repeat. Then I would tell the browser that you want the image to "cover the screen".
So, with that said, here is the code for what I just explained:
html {
background: url("http://i.imgur.com/vDF3k2s.jpg")no-repeat center;
background-size: cover;
overflow: auto;
}
I should explain that I have deleted the -webkit, -moz, etc. portions of the code. That is because "overflow" is compatible with so many older versions of the most commonly used browsers, that to write that in your code is unnecessary.
Also, when I'm creating a fullscreen background image on a page, I usually use "background" instead of "background-image" and I have the "overflow" as "hidden". I can't honestly tell you if that is a "best practice" or if your writing "overflow" as "auto" is, but I also don't know what other content you plan to put in place, etc.
Anyway, I hope my solution helps and please hit me back to let me know!