Q:

Zoom or crop a background image instead of stretching it

I have a background image which takes the full width of the browser window.
This background image should have a fixed height, lets say 500 px.
I'm trying to get this image to be as complete as possible when its aspect ratio is close to the one of the browser window, and then to zoom or crop on a part
of the image (middle for example) rather than stretching it or displaying just a side of it when the browser window gets larger.
Here is an example of what I am trying to get:

Here is a Fiddle with how it is working currently: https://jsfiddle.net/bb61c412/
And here is the current HTML code:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://bootswatch.com/cosmo/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="navbar navbar-default navbar-fixed-top ">
    <div class="container">
      <div class="navbar-header">
        <a href="#" class="navbar-brand">website</a>
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
          <span class="icon-bar"></span>
        </button>
      </div>
    </div>
  </div>


  <div style="width:100vw; height: 500px; background-image: url(https://upload.wikimedia.org/wikipedia/commons/8/80/Paul_Gauguin_088.jpg); background-repeat: no-repeat;">
  </div>

A:

As @theblackgigant said you have to set background-size property to 'enter code herecover.
You can also set background-position: bottom center to have the right behavior
https://jsfiddle.net/bb61c412/2/

