I would like to place a background image on the body element to be stretch on the entire browser screen.

The problem is that while doing this the image getting some "zoom in" and image is cutting due to this. 

For example let take this current image: 

<http://www.baltana.com/files/wallpapers-15/Pug-Dog-HD-Wallpapers-38933.jpg>

And see how its zoom the image and cuts some parts around.

I've tried to play with the CSS background cover features but with no luck.

```css
body {
  background-image: url('https://i.stack.imgur.com/7xThY.jpg');
  background-size: cover, 100%;
  background-position: 50% 50%;
  background-attachment: fixed;
}
```