CSS - How to resize texboxes with background image when browser is resized?

Question

Please not I'm not really skilled with CSS.
I'm working on a personal project and I have two columns containing text-boxes. Theses textboxes are customized with a background-image.
This perfectly works.

But when I'm resizing my browser, the texboxes overlap each other. When overlapping, I'd like the texboxes to be resized ; and when a min width is reached, I'd like to place the texboxes below each-other.
Can I do this in pure CSS ? If so, how can I change what I wrote to reach this goal ?

(Oh, and BTW, I need compatibility for IE8+, no need to support IE6 nor 7). Thank you !

Here is a JsFiddle to better understand the problem and see the code I've written so far.

I suppose the problem is from

width: 278px;

but I tried with % and it didn't resolve the problem (you can try it).
Thank you for your help

Answer 1

It is because of the width of your images you are using for the background, it works fine if you have the inputs the same width as the images. FIDDLE

input[type=text],input[type=password]{
   border:none;
   background:url('http://i.stack.imgur.com/FPaoD.png') no-repeat top left;
   font: 14px 'Segoe UI','Arial',sans-serif;
   color: #888;
   outline:none;
   height: 48px;
   margin: 0 auto 10px;
   padding: 0 10px 0 50px;
   /* set width to image width */
   width: 338px;
}

I would suggest styling them with CSS if you want them to be responsive.