Foros del Web » Creando para Internet » CSS »

¿Por qué una imagen se ve distinto como fondo que como imagen?

Estas en el tema de ¿Por qué una imagen se ve distinto como fondo que como imagen? en el foro de CSS en Foros del Web. Buenas a todos. Llevo toda la noche peleándome con esto que me pasa. Mirad, tengo este código de página: Código HTML: Como imagen gif <img ...
  #1 (permalink)  
Antiguo 20/08/2009, 16:59
Avatar de Maicro  
Fecha de Ingreso: agosto-2009
Ubicación: En el imperio de Gallardón I
Mensajes: 203
Antigüedad: 8 años, 4 meses
Puntos: 2
Pregunta ¿Por qué una imagen se ve distinto como fondo que como imagen?

Buenas a todos. Llevo toda la noche peleándome con esto que me pasa. Mirad, tengo este código de página:

Código HTML:
Como imagen gif <img src="img/botonoff.gif" width ="100px" height ="30px" />
<div id="gif">
Fondo de capa gif
</div >
<div id="jpg">
Fondo de capa jpg
</div >
<div id="png">
Fondo de capa png
</div > 
Al cual aplico este estilo:

Código HTML:
body {
background: #888888;
}
#gif{
	background-image: url(img/botonoff.gif);
	width:200px;
	height:30px;
	color: #ffffff;		
}
#jpg{
	background-image: url(img/botonoff.jpg);
	width:200px;
	height:30px;
	color: #ffffff;		
}
#png{
	background-image: url(img/botonoff.png);
	width:200px;
	height:30px;
	color: #ffffff;		
}
Pues he aquí cómo se ve en IE6 -a la izquierda- y en Chrome -a laderecha-:


El mismo archivo GIF es el que está como imagen que como fondo de la capa. Sin embargo, los navegadores, al reproducirlo como fondo, alteran la tabla de colores perdiendo todo el efecto de brillo buscado -será el fondo de un botón-. Por favor, ¿alguien sabe la causa y su posible solución?

Y, ¿no se pueden usar JPEGs ni PNGs como fondos de capas?

Muchas gracias y disculpas por mi torpeza. Saludos.
  #2 (permalink)  
Antiguo 20/08/2009, 17:15
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: ¿Por qué una imagen se ve distinto como fondo que como imagen?

Por esto:
width ="100px" height ="30px"
Como imagen insertada tú le das el tamaño que quieres, pero como fondo sale con su tamaño original.
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 20/08/2009, 17:22
Avatar de Maicro  
Fecha de Ingreso: agosto-2009
Ubicación: En el imperio de Gallardón I
Mensajes: 203
Antigüedad: 8 años, 4 meses
Puntos: 2
Respuesta: ¿Por qué una imagen se ve distinto como fondo que como imagen?

Muchas gracias por tu ayuda. Verás, la imagen tiene un pixel de ancho por treinta de alto. En todo momento respeto la altura de la imagen. Pero probaré a hacerla más grande. Lo dicho, gracias.
  #4 (permalink)  
Antiguo 20/08/2009, 17:31
Avatar de Maicro  
Fecha de Ingreso: agosto-2009
Ubicación: En el imperio de Gallardón I
Mensajes: 203
Antigüedad: 8 años, 4 meses
Puntos: 2
Respuesta: ¿Por qué una imagen se ve distinto como fondo que como imagen?

Me pongo a tus piés. Este es el resultado:



Jesús, creía recordar de cuando estudié HTML que la ventaja de usar fondos de 1 px de ancho al ahorrar ancha de banda consumido no provocaba estas cosas...

Por cierto, ¿y lo de que no puedan usarse PNGs y JPEGs como fondos, ¿a qué es debido?

Toma, te la has ganado Muchas gracias.

  #5 (permalink)  
Antiguo 20/08/2009, 17:54
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: ¿Por qué una imagen se ve distinto como fondo que como imagen?

Hola Maicro:
si una imagen de 1px de anchura la repites como fondo, lo que hace el navegador es eso, repetirla en nº de veces que necesite para cubrirlo.
Pero si modificas el tamaño con las propiedades width o height, el navegador la estira (o la encoge), con la consiguiente deformación o pérdida de calidad.

Y los png's y jpg's en los fondos, los puedes usar sin problemas. Quizás te confundas con el hecho de que ie6 no representa bien las transparencias de los png's.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 21/08/2009, 01:34
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: ¿Por qué una imagen se ve distinto como fondo que como imagen?

Ahí está la explicación, ni más ni menos.

Por dios, estas fotos de par de mañana... (baba).

Saludos a Gallardón I
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 21/08/2009, 02:41
Avatar de Maicro  
Fecha de Ingreso: agosto-2009
Ubicación: En el imperio de Gallardón I
Mensajes: 203
Antigüedad: 8 años, 4 meses
Puntos: 2
Respuesta: ¿Por qué una imagen se ve distinto como fondo que como imagen?

Cita:
Iniciado por kseso? Ver Mensaje
Hola Maicro:
Muy buenas, y muchas gracias por tu interés.

Cita:
Iniciado por kseso? Ver Mensaje
si una imagen de 1px de anchura la repites como fondo, lo que hace el navegador es eso, repetirla en nº de veces que necesite para cubrirlo.
Sí, es así como tengo el fondo del [body] de la página con la que estoy. El fallo, que he pensado antes de dormirme , es que, como dices, lo que me enseñaron era una imagen de un pixel de ancho repetida, y no estirada. El señor alemán, que ya viene a verme.

Cita:
Iniciado por kseso? Ver Mensaje
Pero si modificas el tamaño con las propiedades width o height, el navegador la estira (o la encoge), con la consiguiente deformación o pérdida de calidad.
Sí, pero, lo que no me cuadra es lo que os mostré:



La primera imagen, situada a continuación del texto "Como imagen gif", de un pixel de ancho, está estirada con este código:

Código HTML:
<img src="img/botonoff.gif" width ="100px" height ="30px" /> 
La segunda imagen, situada bajo el texto "Fondo de capa gif", la misma de un pixel de ancho, también está estirada está estirada con este código:

Código HTML:
#gif{
	background-image: url(img/botonoff.gif);
	width:200px;
	height:30px;
	color: #ffffff;		
}
Las dos, entiendo, las tiene que estirar el navegador -en horizontal porque en vertical ocupan ambas 30 pixeles- para mostrarlas en pantalla. Y ambos, IE y Chrome, al estirarla como fondo la interpolan y, al estirarla como imagen, simplemente duplican la columna de pixeles...

Cita:
Iniciado por kseso? Ver Mensaje
Y los png's y jpg's en los fondos, los puedes usar sin problemas. Quizás te confundas con el hecho de que ie6 no representa bien las transparencias de los png's.
No lo sé. Mira el código:

Código HTML:
#jpg{
	background-image: url(img/botonoff.jpg);
	width:200px;
	height:30px;
	color: #ffffff;		
}
#png{
	background-image: url(img/botonoff.png);
	width:200px;
	height:30px;
	color: #ffffff;		
}
Si no estoy equivocado, el primero pone como de fondo un jpg, y el segundo un png que no posee transparencia...

Bueno, de todas formas, muchas gracias. Eso sí, no pongo birritas a estas horas, que se nos altera el personal...
  #8 (permalink)  
Antiguo 21/08/2009, 02:44
Avatar de Maicro  
Fecha de Ingreso: agosto-2009
Ubicación: En el imperio de Gallardón I
Mensajes: 203
Antigüedad: 8 años, 4 meses
Puntos: 2
Respuesta: ¿Por qué una imagen se ve distinto como fondo que como imagen?

Cita:
Iniciado por Mikmoro Ver Mensaje
Ahí está la explicación, ni más ni menos.
O como decía mi abuela, ni más menos que más.

Cita:
Iniciado por Mikmoro Ver Mensaje
Por dios, estas fotos de par de mañana... (baba).
Tranquilidad, que ya me he abstenido de poner otra en honor a Kseso?

Cita:
Iniciado por Mikmoro Ver Mensaje
Saludos a Gallardón I
¡¿Ese?! Es un intocable, está en otra realidad,...
  #9 (permalink)  
Antiguo 21/08/2009, 06:01
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: ¿Por qué una imagen se ve distinto como fondo que como imagen?

Cita:
Iniciado por Maicro Ver Mensaje
¡¿Ese?! Es un intocable, está en otra realidad,...
Y será presidente si no se lo ventilan antes (muy a nuestro pesar, intuyo).
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 21/08/2009, 07:07
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: ¿Por qué una imagen se ve distinto como fondo que como imagen?

Cita:
#gif{
background-image: url(img/botonoff.gif);
width:200px;
height:30px;
color: #ffffff;
}
Las dos, entiendo, las tiene que estirar el navegador
Creo que aquí tienes un pequeño ¿efecto de la visita del sr. alemán? aunque no se quién será
la altura y anchura es la de la caja #gif, el fondo lo repite (manteniendo el tamaño original como comenté antes).
la diferencia con
Cita:
<img src="img/botonoff.gif" width ="100px" height ="30px" />
es que aquí actúas sobre la propia imagen, alterando el tamaño de la imagen (y afectará de una u otra forma sobre la caja contenedora en función de las propiedades que tenga la caja).

Pero para saber qué te está pasando, mejor pon la imagen esa de 1px*30 (botonoff.gif)

Un saludo.

P.D.: que no se duerma el empedrador (digo, emperador), que tiene demasiado cerca a la madrasta
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #11 (permalink)  
Antiguo 21/08/2009, 08:12
Avatar de Maicro  
Fecha de Ingreso: agosto-2009
Ubicación: En el imperio de Gallardón I
Mensajes: 203
Antigüedad: 8 años, 4 meses
Puntos: 2
Respuesta: ¿Por qué una imagen se ve distinto como fondo que como imagen?

Cita:
Iniciado por Mikmoro Ver Mensaje
Y será presidente si no se lo ventilan antes (muy a nuestro pesar, intuyo).
Lo veo y lo subo.

Cita:
Iniciado por kseso? Ver Mensaje
P.D.: que no se duerma el empedrador (digo, emperador), que tiene demasiado cerca a la madrasta
Esa es nuestra única "Esperanza". Pero vamos, entre lo malo y lo peor...

Cita:
Iniciado por kseso? Ver Mensaje
Creo que aquí tienes un pequeño ¿efecto de la visita del sr. alemán? aunque no se quién será
¡¿No conoces el chite?!

-Nieto, nieto. ¿Y cómo se llama el señor ese alemán que va a venir a verme?

-Alzheimer, abuelo, alzheiiimer.


Cita:
Iniciado por kseso? Ver Mensaje
la altura y anchura es la de la caja #gif, el fondo lo repite (manteniendo el tamaño original como comenté antes).
la diferencia con

es que aquí actúas sobre la propia imagen, alterando el tamaño de la imagen (y afectará de una u otra forma sobre la caja contenedora en función de las propiedades que tenga la caja).
¡Ah! ... Bien, disculpas, no lo había imaginado... :( ... bueno, te la has ganado:



Cita:
Iniciado por kseso? Ver Mensaje
Pero para saber qué te está pasando, mejor pon la imagen esa de 1px*30 (botonoff.gif)
Sí, ya está, ya la he dejado al ancho del botón y problema resuelto.

Cita:
Iniciado por kseso? Ver Mensaje
Un saludo.
Muchas gracias y otro saludo...
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:16.