DOMPDF - Imagen de fondo

eguitox · #1 (**permalink**) 08/05/2013, 11:24

Hola a todos.

En mi trabajo estoy generando una app que me genere un diploma el cual tiene los datos de una determinada persona y también tiene un fondo de diploma.

Estoy usando DOMPDF, He logrado colocar la imagen de fondo, pero me la tira en medio de la pagina, la idea es que ocupe toda la pagina.

Originalmente la imagen tien dimension de 1280x760 y la agrego mediante css con background.

alguien que haya logrado colocar una imagen a full page porfavor es urgente.

Un saludo.

01munrra · #2 (**permalink**) 08/05/2013, 14:10

Tienes que primero ubicarte en el archivo dompdf_config.custom.inc.php y descomenta la libreria define("DOMPDF_ENABLE_REMOTE", true); linea 11 creo.... permitira que se vean las imagenes, dado sea el caso si usas un framework.

ahora para el fondo completo lo puedes aplicar desde background como ya comentastes....

Saludos!!...

eguitox · #3 (**permalink**) 08/05/2013, 15:39

OK... Gracias.

El problema no es la visualización, ya que a mi si se me ven las imágenes... lo que no puedo ajustarlas al tamaño de la pagina.

alguna idea??

01munrra · #4 (**permalink**) 09/05/2013, 06:30

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 originalbackground: url(http://1.bp.blogspot.com/-DKFKsZSOsAU/UXjiY_b5FDI/AAAAAAAADS0/tAniC34Sdzg/s1600/pixar-animation-studios.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        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<html>
    <head>
        <title>jQuery Plugin Redireccionar Imagen 100%</title>
        <meta name="title" content="jQuery Plugin Background Resize">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
        <script language="javascript" type="text/javascript" src="jquery-1.7.2.min.js"></script>
        <script language="javascript" type="text/javascript" src="smartBackgroundResize-1.0-jquery-plugin.js"></script>
                
        <script type="text/javascript"> 
            $(document).ready(function(){
                $('#background').smartBackgroundResize({
                    image: 'http://www.hdwallpapers.in/walls/pixar_brave-wide.jpg'              
                });
            });
        </script>       
    </head>
    <body>      
    
        <div id="background"></div> 
        
    </body>
</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...