Buenas a todos Nuevamente me surge una duda miren estoy intentando hacer un sitio web Responsive pero el DIV donde aparece el Slider le puse una imagen de mascara la cual luce muy bien el detalle al verla en un ipad o un iphone la imagen es la unica k se hace pekeña mas no el Div con la mascara
anexo capturas por si no me logre explicar

Pantalla Normal
http://www.subeimagenes.com/img/captura1-1379963.html

Pantalla Ipad
http://www.subeimagenes.com/img/captura2-1379965.html

Pantalla Iphone
http://www.subeimagenes.com/img/captura3-1379966.html

Porfavor si alguien em pudiera ayudar ya buske por toda la web pero no veo la solucion este es el codigo del Div

Código CSS :

.slider{
   margin: 0 auto;
   width: 84%;
   height: 300px;
   position: relative;
   overflow: hidden;
   background: #F7EFEF;
   mask-image: url(images/frameslider.png);
   -webkit-mask-image: url(images/frameslider.png);
   -moz-mask-image: url(images/frameslider.png);
   -o-mask-image: url(images/frameslider.png);
   -ms-mask-image: url(images/frameslider.png);