PDA

Ver la Versión Completa : Impresión de imagenes de fondo

roman
26-10-2006, 22:24:24
Hola,

Tengo la siguiente página:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title> Prueba - Logo </title>
<style type='text/css'>
body
{
background-image: url(logo.png);
background-position: 32px 32px;
background-repeat: no-repeat;
background-attachment: fixed;
}

@media print
{
body
{
background-position: 1in 1in;
}
}
</style>
</head>

<body>

</body>
</html>


Es decir, una página en blanco con un logo en la esquina superior izquierda.

Para impresión, el logo se situa a una pulgada de los bordes. ¿Qué bordes? Esta es la cuestión. En FireFox parece que la distancia se mide desde el borde de la página mientras que en Internet Explorer se hace desde el margen (especificado en la configuración de página).

El caso es entonces que no puedo situar el logo de manera que se vea igual si lo imprimo desde uno u otro navegador.

¿Cómo podría definir estilos dependiendo de si es FF o IE?

Por otra parte pero relacionado con esto (creo), en FireFox la imagen se imprime en versión reducida (muy reducida) en lugardel tamaño natural. ¿Saben a qué pueda deberse?

// Gracias
kayetano
26-10-2006, 23:03:45
Hola

prueba a añadir al estilo del body lo siguiente:

.body {
padding:0px;
border:0px;
margin:0px;
...
}
roman
26-10-2006, 23:14:02
Gracias. No parece cambiar nada :(

// Saludos
dec
26-10-2006, 23:34:19
Hola,

Cuando dices que la imagen se imprime pequeña en Firefox... ¿se imprime más pequeña que los 32 píxeles que indicas?

No sé... Prueba con algo así Román:


body {
background-position: top left;
}


Actualización: Se me olvidaba... quita también el:


@media print
{
body
{
background-position: 1in 1in;
}
}


(La idea es que no se establezcan medias absolutas para la imagen, aunque, pensándolo bien... esto no debería influir... vamos, digo yo...)

Actualización: Prueba también con algo así Román:


position: absolute;


Para mantener una posición absoluta... en todo caso, en lugar de:


background-attachment: fixed;
roman
26-10-2006, 23:41:33
Los 32 pixeles no influyen, son el margen para pantalla. Pensando en que de alguna manera influyesen, los acabo de quitar y sucede lo mismo. También he pensado que pueda deberse a un problema con la impresora en específica pero si veo directamente la imagen con FF, sí la imprime bien.

En cuanto a lo de top left, pues si pongo eso, la imagen se coloca a distancia 0, y en FF significa que no se ve por que queda fuera de los margenes de impresión.

// Saludos
dec
26-10-2006, 23:46:36
Hola,

Hum... el margen para el cuerpo del documento (que creo que es el "marco" para la página Web) puedes establecerlo con "margin", es decir:


margin: 32px 0px 0px 32px;


O con sus:


margin-top: 32px;
margin-left: 32px;


Por otro lado, tratando de responder a tu pregunta de cómo se puede "programar" para un navegador u otro... creo que una de las técnicas es la que menciona Kayetano, es decir, anteponer un punto al elemento en cuestión,... pero, no es la única técnica y, bueno, estas cosas tienen el inconveniente de que puede que vayan bien en IE6, pero acaso no en IE7... qué sé yo... sería cuestión de probar, naturalmente.

Echa un vistazo a este artículo de Minid.net (http://www.minid.net): Reglas especiales para IE7 (http://www.minid.net/2006/03/28/reglas-especiales-para-ie7/) que creo que vale también para versiones anteriores de Internet Explorer y acaso pueda servirte de algo Román.

Edito: Creo que lo dicho para el margen del documento... o sea, lo que digo más arriba... puede que no tenga que ver, ahora que lo pienso mejor...
roman
27-10-2006, 05:16:10
Bueno, margin parece no afectar la posición de una imagen de fondo. Lo del punto lo había probado pero al no ver cambios pensé que era una errata y que lo importante era lo del margin, padding etc. Ahora lo he vuelto a probar con más calma pero lo mismo, no parece funcionar. Lo que sí ha funcionado es anteponer el guión bajo a la propiedad background-position:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title> Prueba - Logo </title>
<style type='text/css'>
body
{
background-image: url(logo_cele.png);
background-position: 32px 32px;
background-repeat: no-repeat;
background-attachment: fixed;
}

@media print
{
body
{
background-position: 1in 1in;
_background-position: 0in 0in;

height: 200px;
border: 1px solid red;
}
}
</style>
</head>

<body>
</body>
</html>


Pero lo más grave es lo de la impresión. En la vista preliminar se ve bien, pero al imprimir, en FF la imagen queda microscópica. ¿Podría alguno probar y confirmar o refutar esto?

Gracias por la ayuda

// Saludos