background-image en IE 6, 7 y 8

cristian_cena · #1 (**permalink**) 10/11/2009, 10:06

Hola foro:

Alguien sabría indicarme cual es el problema con la propiedad background-image en internet explorer?

pues en head, entre <style> tengo:
body {
background-image:url(imagen.jpg);
}

y en body, nada:
<body>
</body>

La imagen de fondo no se ve en ninguna version de IE pero sí en firefox.

zerokilled · #2 (**permalink**) 10/11/2009, 10:15

¿sera que la ruta de la imagen es incorrecta? lo siguiente me funciona en iexplorer8,

Código:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test Development</title>
<style type='text/css'>
body{
background-image:url(http://static.forosdelweb.com/fdwtheme/logo-reflejo.png);
}
</style>
</head>

<body></body></html>

kseso? · #3 (**permalink**) 10/11/2009, 10:27

Hola Cristian:
Debe haber algo ajeno a esa declaración de css que influya.

Esa regla sola en un html va perfectamente en ie7 y en ietester en ie6/ie8.
Un caso que ya se ha dado por aquí es declarar primero "background-image" y después utilizar la forma abreviada "background" para el mismo elemento obviando la ruta. Así:

Cita:

.caja {
background-image: url(ruta.xxx);
...
background: #xxx;
}

Un saludo

cristian_cena · #4 (**permalink**) 10/11/2009, 10:33

Gracias

zerokilled, la ruta parece estar bien ya que funciona en Firefox.
kseso? gracias por el dato, igualmente solo usé el código que puse arriba

Parece que el problema pueda ser la imagen y no el css, ya que pruebo con otras imagenes y anda perfecto.

Parece que la imagen le hace huelga a IE jeje. muuuuy extraño. un jpg "del palo" jeje

bueno, hice un duplicado de la imagen con photoshop y ahora funciona. disculpen las molestias y muchas gracias! nos vemos

P/D: si quieren divertirse les subo la imagen a un host

kseso? · #5 (**permalink**) 10/11/2009, 10:52

¿A que es una imagen con extensión renombrada?
Esto es, que siendo un imagen.png le hayas cambiado sólo el nombre a imagen.jpg (sin haber transformado el propio archivo. Sólo el nombre.

Ya contarás

cristian_cena · #6 (**permalink**) 10/11/2009, 11:20

Hola kseso, miralo tu mismo
http://www.estudiojamba.com.ar/fondo.jpg

Poco se del tema, pero misterio de por medio le atribuyo el error a mi photoshop portable. Pues pasé la imagen a paint, guarde una nueva imagen y el problema se solucionó.

zerokilled · #7 (**permalink**) 10/11/2009, 11:25

el problema es que la imagen esta guardada en modo CMYK, guardala en RGB.

cristian_cena · #8 (**permalink**) 10/11/2009, 11:53

si señor!! y yo echandole la culpa a photoshop jajaja. Bueno aprendí que IE no toma las imagenes en cmyk, como corresponde.

en realidad estaba trabajando con Indesign por ello me olvide de pasar la imagen a rgb. Gracias por la captura kseso? Sobre los png 32 utilizo:



y para IE 8:



Gracias a ambos!

kseso? · #9 (**permalink**) 10/11/2009, 11:56

Cita:

Iniciado por zerokilled

el problema es que la imagen esta guardada en modo CMYK, guardala en RGB.

Buena vista, Zerokilled

Además tienes una resolución excesivamente alta para su uso en la web: 300px. Con 75 o 92 te sería sufiente.

Un saludo

Edito:
Cristian: CMYK es para impresión. Y los ie también tienen problemas con los png32

cristian_cena · #10 (**permalink**) 10/11/2009, 12:55

Perdon kseso? respondi arriba (11:53) porque tengo el "modo de vista en arbol" del foro.

zerokilled · #11 (**permalink**) 10/11/2009, 12:56

acabo de revisar que iexplorer no es el unico navegador que no puede mostrar CMYK en JPEG. chrome 2 no lo muestra, pero interesante aun, safari si puede. digo interesante proque ambos navegador estan basado en el user agent webkit. y lo mismo sucede netscape 9 a peser del user agent ser gecko.

por otro lado, y supongo que de esto podriamos debatir con las opiniones de cada cual. no creo que una resolucion de 300ppp (o dpi en ingles) afecte la representacion de este en un navegador, pues lo mas importante de una imagen es la cantidad real de pixeles. segun pude comprobar, los navegadores automaticamente renderizan la imagen segun los ppp configurado del monitor, comunmente entre 72 y 96. claro, esto sin olvidar que los ppp afecta en un impreso.

cesarpunk · #12 (**permalink**) 10/11/2009, 15:14

Cita:

Iniciado por cristian_cena

si señor!! y yo echandole la culpa a photoshop jajaja. Bueno aprendí que IE no toma las imagenes en cmyk, como corresponde.

en realidad estaba trabajando con Indesign por ello me olvide de pasar la imagen a rgb. Gracias por la captura kseso? Sobre los png 32 utilizo:



y para IE 8:



Gracias a ambos!

Disculpa mi ignorancia colega, para que sirve eso?

zerokilled · #13 (**permalink**) 10/11/2009, 15:25

Cita:

IE7 is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.

http://code.google.com/p/ie7-js/

cesarpunk · #14 (**permalink**) 10/11/2009, 15:54

vaya justo lo que buscada porque siempre vi en la web que usaban el img{behavior: url("pngfix.htc");} pero nunca me funcionaba a mi, disculpen que desvirtue el tema pero he tenido suerte de encontrar algo muy util para mis proyectos, gracias

cristian_cena · #15 (**permalink**) 10/11/2009, 15:57

Sirve para hacer que IE respete los estandares. Es, dentro de lo que se, una libreria javascript que corrige los bugs de los selectores y resuelve el problema de los png. Puedes descargarla en el link que paso zerokilled