Answer

You have multiple options:

1. background-size: 100% 100%; – image gets stretched (aspect ratio may be preserved, depending on browser)
2. background-size: contain; – image is stretched without cutting it while preserving aspect ratio
3. background-size: cover; – image is completely covering the element while preserving aspect ratio (image can be cut off)

/edit: And now, there is even more: https://alligator.io/css/cropping-images-object-fit

Demo on Codepen

Update 2017: Preview

Here are screenshots for some browsers to show their differences.

Chrome

Firefox

Edge

IE11

Takeaway Message

background-size: 100% 100%; produces the least predictable result.

Resources

• https://alligator.io/css/cropping-images-object-fit