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

[Maicro]

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.

[Mikmoro]

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.

[Maicro]

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.

[Maicro]

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.

[kseso?]

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.

[Mikmoro]

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

[Maicro]

Iniciado por kseso?

Hola Maicro:

Muy buenas, y muchas gracias por tu interés.

Iniciado por kseso?

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.

Iniciado por kseso?

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...

Iniciado por kseso?

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...

[Maicro]

Iniciado por Mikmoro

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

O como decía mi abuela, ni más menos que más.

Iniciado por Mikmoro

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

Tranquilidad, que ya me he abstenido de poner otra en honor a Kseso?

Iniciado por Mikmoro

Saludos a Gallardón I

¡¿Ese?! Es un intocable, está en otra realidad,...

[Mikmoro]

Iniciado por Maicro

¡¿Ese?! Es un intocable, está en otra realidad,...

Y será presidente si no se lo ventilan antes (muy a nuestro pesar, intuyo).

[kseso?]

#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

<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

[Maicro]

Iniciado por Mikmoro

Y será presidente si no se lo ventilan antes (muy a nuestro pesar, intuyo).

Lo veo y lo subo.

Iniciado por kseso?

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...

Iniciado por kseso?

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.

Iniciado por kseso?

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:

Iniciado por kseso?

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.

Iniciado por kseso?

Un saludo.

Muchas gracias y otro saludo...