You need to use background-size: 100% 100%;
Demo 2 (Won't stretch, this is what you are doing)
Explanation: You need to use 100% 100%
as it sets for X
AS WELL AS Y
, you are setting 100%
just for the X
parameter, thus the background doesn't stretch vertically.
Still, the image will stretch out, it won't be responsive, if you want to stretch the background
proportionately, you can look for background-size: cover;
but IE will create trouble for you here as it's CSS3 property, but yes, you can use CSS3 Pie as a polyfill. Also, using cover
will crop your image.