Foros del Web » Creando para Internet » CSS »

Problema con imagen de fondo en boton

Estas en el tema de Problema con imagen de fondo en boton en el foro de CSS en Foros del Web. Hola, mi duda es la siguiente, tengo un botón con gradiente de fondo y quiero ponerle también una imagen de fondo pero la imagen no ...
  #1 (permalink)  
Antiguo 14/01/2013, 06:38
 
Fecha de Ingreso: mayo-2012
Mensajes: 25
Antigüedad: 11 años, 10 meses
Puntos: 1
Problema con imagen de fondo en boton

Hola, mi duda es la siguiente, tengo un botón con gradiente de fondo y quiero ponerle también una imagen de fondo pero la imagen no aparece, si quito el gradiente si que se ve la imagen de fondo, son incompatibles estas dos propiedades o hay alguna forma de ponerlas las dos?

Muchas gracias de antemano.
  #2 (permalink)  
Antiguo 14/01/2013, 07:09
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Problema con imagen de fondo en boton

Con background-image puedes definir varias imágenes de fondo.
  #3 (permalink)  
Antiguo 14/01/2013, 07:31
 
Fecha de Ingreso: mayo-2012
Mensajes: 25
Antigüedad: 11 años, 10 meses
Puntos: 1
Respuesta: Problema con imagen de fondo en boton

Pongo el código:

Código:
button.css3button {
        background-image: url('../images/carro3.png');
        background-repeat: no-repeat;
        margin-top:15px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
        font-weight: bold;
	color: #ffffff;
	padding: 10px 15px;
	background: -moz-linear-gradient(
		top,
		#28aedb 0%,
		#1889ab);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#28aedb),
		to(#1889ab));
                
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border: 0px solid #ffffff;
	-moz-box-shadow:
		0px 1px 2px rgba(000,000,000,0.5),
		inset 0px -2px 1px rgba(000,000,000,0.1);
	-webkit-box-shadow:
		0px 1px 2px rgba(000,000,000,0.5),
		inset 0px -2px 1px rgba(000,000,000,0.1);
	box-shadow:
		0px 1px 2px rgba(000,000,000,0.5),
		inset 0px -2px 1px rgba(000,000,000,0.1);
	text-shadow:
		0px -2px 0px rgba(000,000,000,0.2),
		0px 0px 0px rgba(255,255,255,0);
}
Y como decía, cuando quito los gradientes se ve la imagen de fondo pero si los dejo no aparece.
  #4 (permalink)  
Antiguo 14/01/2013, 07:50
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Problema con imagen de fondo en boton

La solución es la que ya te dije, poner varias imágenes de fondo. Lo que estás haciendo es precisamente eso, pero lo estás haciendo mal. Porque defines background-image, y luego vuelves a definir background-image con el shorthand background.
Fíjate en el enlace que te pasé, cómo se definen varias imágenes y aplícalo a lo tuyo.

Los degradados y una imagen de fondo, es la misma cosa.

Última edición por pzin; 15/01/2013 a las 12:07 Razón: cambié gradientes por degradados. Me hacen hablar mal \-:
  #5 (permalink)  
Antiguo 15/01/2013, 11:37
 
Fecha de Ingreso: mayo-2012
Mensajes: 25
Antigüedad: 11 años, 10 meses
Puntos: 1
Respuesta: Problema con imagen de fondo en boton

ok, gracias por tu ayuda!

Etiquetas: botones
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 18:16.