CSS Images appear really small in my code - html

Question

So I want to do something like this, having an image as the fullbackground of a website.
However, I keep trying and trying with ridiculously huge images (The one on my JSFiddle is 6000 x 4000 I think) and they're all still small and get on low resolution when I scale them to fit the website.
Here is my JSFiddle showing my CSS code.
body {
background-image: url(https://snappygoat.com/b/d6249bb487c44ca8e93f4bc0faa46c8f1df7c690);
background-color: #464646;
background-repeat: no-repeat;
background-size: cover;
}
Any help appreciated.

Answer 1

The background cover approach is correct and the resolution of the image shouldn't matter if not for the quality of the image itself (you can have a 400px image fill a 3000px element).
The image will always adapt to fill its container and what I noticed in your fiddle is that the container of the image seems to be the problem, not the image itself.
here's your fiddle, edited with the background element height and width set.
{
height: 100vh;
width: 100vh;
/* Bonus: I think you want your background centered, as in the example that you provided */
background-position: center center;
}
https://jsfiddle.net/edLm73r2/

Answer 2

The image you are used on the example fiddle is very small(768 x 512)
https://snappygoat.com/b/d6249bb487c44ca8e93f4bc0faa46c8f1df7c690
Go for some large image if you want to make it as full screen background. May be use this one from unsplash https://unsplash.com/photos/It0DCaCBr40
body {
background: url(https://source.unsplash.com/user/nolanissac/It0DCaCBr40) #464646 no-repeat;
background-size: cover;
}

Answer 3

It looks like wherever the image is being hosted is not serving the full resolution of the image or quality.
I found the image you are using from a stock image site here and downloaded a re-uploaded so it stays it's full size.
body {
background-image: url(https://i.lensdump.com/i/itbHyH.jpg);
background-color: #464646;
background-repeat: no-repeat;
background-size: cover;
background-position-x: center;
background-position-y: center;
background-attachment: fixed;
}