How to use responsive background image in css3 in bootstrap

Question

I dont want to use html tag. This is my css. I am using bootstrap 3.0.

background:url(\'images/ip-box.png\')no-repeat;
background-size:100%;
height: 140px;
         


        

Answer 1

You need to use background-size: 100% 100%;

Demo

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.