When using the following css on a button, the image is sized correctly:
background-image: url('~/pages/0.jpg'); background-repeat:no-repeat; background-position: center center; background-size: cover;

If I change the background-image to be a remote image, for example:
background-image: url('http://img.youtube.com/vi/8W_1vg7W6Oo/0.jpg'); then the rest of the css for positioning the background image is ignored.

Apparently an image has to be local for it be able to be styled as a background image.