Ver Mensaje Individual
  #4 (permalink)  
Antiguo 09/05/2013, 06:30
01munrra
 
Fecha de Ingreso: abril-2011
Mensajes: 31
Antigüedad: 13 años
Puntos: 2
Respuesta: DOMPDF - Imagen de fondo

mmmmmm.... tu lo que quieres es que la imagen se vea un 100% en el body, algo como un Resize Inteligente, una sola imagen en el body, bien..... bueno aplica esto al css, a la etiqueta del body:

1 Forma

Código CSS:
Ver original
  1. background: url(http://1.bp.blogspot.com/-DKFKsZSOsAU/UXjiY_b5FDI/AAAAAAAADS0/tAniC34Sdzg/s1600/pixar-animation-studios.jpg) no-repeat center center fixed;
  2.         -webkit-background-size: cover;
  3.         -moz-background-size: cover;
  4.         -o-background-size: cover;
  5.         background-size: cover;


para poder aplicar esto tienes que asegurarte de que el tamaño de la imagen sea exacto a la pagina que sera generada por dompdf(ejemplo que el tamaño se adecue al las dimensiones de una hoja tamaño carta A4), estas acciones son aplicadas usando css3 toma en cuenta eso.........

2 Forma
ahora hay otra forma que es usando Jquery en mi caso no me gusta usarlo mucho puesto que puede que se de el caso de que al cargar la pagina por X cosa no cargue el .js y se va a ver distorcionada la vista,... bueno te explico esta forma:

nesecitaremos la libreria jquery en este caso use jquery-1.7.2.min.js tu tambien la puedes usar y tambien use la libreria smartBackgroundResize-1.0-jquery-plugin.js son librerias ya trabajas y hechas......

aqui un ejemplo para que veas tu mismo
Código PHP:
Ver original
  1. <html>
  2.     <head>
  3.         <title>jQuery Plugin Redireccionar Imagen 100%</title>
  4.         <meta name="title" content="jQuery Plugin Background Resize">
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.        
  7.         <script language="javascript" type="text/javascript" src="jquery-1.7.2.min.js"></script>
  8.         <script language="javascript" type="text/javascript" src="smartBackgroundResize-1.0-jquery-plugin.js"></script>
  9.                
  10.         <script type="text/javascript">
  11.             $(document).ready(function(){
  12.                 $('#background').smartBackgroundResize({
  13.                     image: 'http://www.hdwallpapers.in/walls/pixar_brave-wide.jpg'             
  14.                 });
  15.             });
  16.         </script>      
  17.     </head>
  18.     <body>     
  19.    
  20.         <div id="background"></div>
  21.        
  22.     </body>
  23. </html>

las 2 librerias la puedes descargar desde aqui:
Jquery 1.7
http://www.4shared.com/document/hQSeVEu2/jquery-172min.html

martBackgroundResize-10-jquer.js
http://www.4shared.com/document/H9GhZpvh/smartBackgroundResize-10-jquer.html

acuerdate de ubicar bien la direccion de los archivos.....

saludos!!!

cualquier cosa comenta...

Última edición por 01munrra; 09/05/2013 a las 06:46