My perfect background image

I currently have a page like this:

body {
    background-image: url("http://placehold.it/1920x1200");
    min-height: 100vh;
    min-width: 100vw;
    overflow: hidden;
}

<!DOCTYPE html>
    <html>
        <head>
            <title>Cool Background Man</title>
            <link rel="stylesheet" type="text/css" href="stylesheet.css">
        </head>
        <body>
        </body>
    </html>

But I need the background-image to always be the smallest that it can be while preserving scaling (no stretching). This means that AT ALL TIMES either width: 100vw or height: 100vh, depending on the screen size. Also AT ALL TIMES the image will fill the screen. It will NEVER show any white space. The image must also ALWAYS show the top right corner, the image size should adjust relative to that.

To summarize, the image will always:

Have either width: 100vw or height: 100vh
Show the top right corner, and the size will adjust relative to that.
Fill the screen for any screen size. No white space at all.
Never stretch. Always preserve the scaling.

Solution

Background size is your friend. Browser support is very good at 95% according to caniuse.com

body { background-image: url("http://placehold.it/1920x1200"); min-height: 100vh; min-width: 100vw; overflow: hidden; }

body {
    background-image: url("http://placehold.it/1920x1200");
    min-height: 100vh;
    min-width: 100vw;
    overflow: hidden;
    background-size: cover;
    background-position: top right;
}

<!DOCTYPE html>
    <html>
        <head>
            <title>Cool Background Man</title>
            <link rel="stylesheet" type="text/css" href="stylesheet.css">
        </head>
        <body>
        </body>
    </html>

UPDATE: One way to do this that allows you to use CSS filters is to apply the background image to pseudo content and apply the filters to that:

body {
  min-height: 100vh;
  min-width: 100vw;
  overflow: hidden;
  position: relative;
}
body:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: url("http://placehold.it/1920x1200");
  background-size: cover;
  background-position: top right;
  -webkit-filter: blur(5px); /* Or whatever filter you want */
  z-index: -1; /* Ensures it's behind the rest of the content */
}

<!DOCTYPE html>
<html>

<head>
  <title>Cool Background Man</title>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

<body>
  Some content
</body>

</html>