Problema con Plugin PrintArea.Js

[Slikp]

- Buenos dias a todos, espero puedan ayudarme con el siguiente problema que tengo... Estoy utilizando el Plugin Jquery.PrintArea.Js ya que entre lo que necesitaba y lo que pude encontrar en la Web este fue el que me resulto mas facil y comodo de utilizar, sin embargo ahora tengo un problema esta vez necesito usarlo para una aplicacion web que estoy desarrollando pero no me esta resultando como quiero, veran estoy intentando mandar a imprimir unos modelos de Carnet, en el cual cargo el modelo del Carnet y mediante una Web Cam hago la captura de la imagen de perfil de la persona y esta a su vez se inserta en una zona especifica del Carnet, luego de eso procedo a imprimir, pero lo que yo visualizo en el navegador no se imprime tal cual... Intentare ser un poco mas claro, supongamos que yo visualizo esto en el navegador y lo mando a imprimir:



- Asi mismo como se ve, se imprime perfectamente. Pero si tengo algo como esto.



- Una imagen super puesta una sobre la otra, al imprimirlo no sale de esa forma si no que sale algo parecido a la primera imagen una al lado de la otra. No se si tenga algo que ver con cuestiones de estructurado en el HTML que no creo porque hice algo tan sencillo como esto.

Código (html4strict) [Seleccionar] Expandir


<div id="imprime">
   <img id="c" src="carnet.png">
   <img id="f" src="foto.png">
</div>


- Y luego con css lo que hice fue poner una sobre la otra y aun asi nada hasta llegue a pensar que el problema podria ser que le daba Position: absolute le cambien eso y nada le agregue y quite el Float: left pensando que podria ser eso y nada.

- Asi que soy todo ojos, sugerencias, opiniones otras librerias que conoscas otra funcion que puedan aportarme, ideas que tengan bienvenido sean... Espero puedan ayudarme Un Saludo...

[_Zume]

ponle un position: Absolute; al que estará arriba, y un position: relative al de abajo, y un z-index: -9999 al de abajo a ver qué tal va, y si puedes muestra el CSS para ver cómo lo tienes.

Código (html4strict) [Seleccionar] Expandir

<div id="imprime">
 
  <div id="c" style="background-image: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRC0NZMaVs5zEgAy3sXyQlNfvaXmqs1iQ3ihiyjRzDgDM1ZEiIOmw)">
    <div id="f" style="left: 60px; background-image: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRC0NZMaVs5zEgAy3sXyQlNfvaXmqs1iQ3ihiyjRzDgDM1ZEiIOmw)">
    </div>
    <!--- PARA AGREGAR MAS sumale +60px al left
    <div id="f" style="left: 120px; background-image: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRC0NZMaVs5zEgAy3sXyQlNfvaXmqs1iQ3ihiyjRzDgDM1ZEiIOmw)">
    </div>
   --->
  </div>
 
</div>

Código (css) [Seleccionar] Expandir

#imprime{
 padding-left: 90px;
}
#c {
 position: relative;
 border-radius: 50%;
 width: 120px;
 height: 120px;
}
#f {
 
 Position: Absolute;
 border-radius: 50%;
 width: 120px;
 height: 120px;
}

[Slikp]

- Gracias Zume por responder, veras en primer lugar de este lugar descargue el plugins de PrintArea.

http://www.jqueryscript.net/other/Print-Specified-Area-Of-A-Page-PrintArea.html

- Y la verdad el plugins me funciona bien pero es este caso en especifico no, intente hacer lo que sugeristes y no funciono. Utilize esta vez el propio codigo del ejemplo de PrintArea con la excepcion de que duplique la imagen y le aplique el css que sugeristes y aun asi nada.

- Como lo veo en el Navegador:



- Y asi es como se visualiza al momento de imprimir.




- Incluso tambien probe con el z-index: -9999 y relative el abajo y nada y tambien puse cada img en un div por separado a ver si ese era el problema he incluso asi no funciono.