background-color + background:url()

[Ronin46]

Veamos, os pongo cuatro casos

Código HTML:

<style type="text/css">
input.azul
	{
		background-color:blue;
	}
</style> 

1) Resultado, el input tiene como fondo el color azul y la imagen

Código HTML:

<input type="text" size="25" style="background: url(imagenes/imagen.png) no-repeat center right; background-color:blue;"> 

2) Resultado, el input tiene como fondo solamente la imagen

Código HTML:

<input type="text" size="25" style="background-color:blue; background: url(imagenes/imagen.png) no-repeat center right;"> 

3) Resultado, el input tiene como fondo solamente la imagen

Código HTML:

<input type="text" size="25" style="background: url(imagenes/imagen.png) no-repeat center right;" class="azul"> 

4) Resultado, el input tiene como fondo solamente la imagen

Código HTML:

<input type="text" size="25" class="azul" style="background: url(imagenes/imagen.png) no-repeat center right;"> 

¿Alguien me puede explicar el por qué de este funcionamiento? Bueno, que si el background-color va antes o después y en función de eso sale la imagen o no lo puedo llegar a entender, ya que por ejemplo, si pones background-color: blue y luego pones background-color:red se queda con el último (red).
Pero, ¿Por qué el class es indiferente antes o después?

Todo esto viene a que quiero que el input tenga color de fondo y también una imagen de fondo, así que si hay otra forma también la podéis comentar (otra forma sería que la imagen ocupase el tamaño del input y ya incluyese el color, pero no me parece solución)

[kseso?]

"background" es una propiedad resumen de 'background-color' || 'background-image' || 'background-repeat' || 'background-attachment' || 'background-position'
Y si recuerdas que la última declaración es la que prevalece, en el momento que lo último que declaras es "background:...." los valores que no defines son "cero" o "nulos" y prevalecen sobre los anteriores.

Si quieres que respete la declaración inicial del color, al poner el estilo en línea utiliza la propiedad "background-image", o en el estilo del head la resumida: "background: #00f".

[Ronin46]

Perfecto, problema resuelto, muchas gracias!

[Mikmoro]

Muy bien: habrá que tomar nota de esta explicación para referenciarla cada vez que haya dudas al respecto.