The part, background-size: cover; specifically is what forces the image to engulf the entire background no matter the size and if either width or height(whichever is smaller) reach the bounding box of an element it will stop.
As the other posters said, in terms of image optimization to avoid too much image blur from a low quality image you can use media queries. One background image for mobile phone, one for tablets, and one for desktops for the same image. Or you can just be lazy and use a large image for all three.