Repetir .png con transparencias css

Zuki

Bueno tengo un problema, es que quiero repetir una imagen que tiene transparencia, pero lo que ocurre es que donde deberia ser transparente se convierte en blanco.

.css
#grind
{
width:100%;
height:100%;
margin-top:0px;
margin-left:0px;
margin-right:0px;
position: relative;
background-image: url("../bground/grind.png");
z-index:2;
}

Como evito que la parte transparente se convierta en blanco?

N1Tr0s

#1 asegurate que tenga transparencia ^^

1 respuesta
Zuki

#2 eso ha sido lo primero que he mirado x'D y tenia transparencia

fer

#1 Prueba a usar

background: url("../bground/grind.png") repeat;
1 respuesta
Zuki

#4 creo que eso lo he cambiado y repetirse se repite, pero sigue sin darme la transparencia de la imagen me aplica un fondo blanco

EDIT: Solucionado cambiando el position a absolute.

1 respuesta
eXtreM3

#5 si lo has solucionado cambiando el position a absolute es que tienes mal el contenedor principal y simplemente has superpuesto la capa. Si quieres hacerlo bien te aconsejo que revises el codigo del css bien.

1 respuesta
Zuki

#6 exactamente es lo que queria :D

Tengo de fondo web un slideshow pasando fotos continuamente, para no ir editando foto a foto y poniendole una mascara, he creado otra capa encima del slideshow con transparencia donde se aplican unos puntitos encima de la imagen.

insero una imagen para que se vea lo que es.

2 respuestas
eXtreM3

#7 entonces más que absolute pondría fixed, por temas de resoluciones, scroll... muy chulo por cierto ;)

1 1 respuesta
Zuki

#8 Gracias! No habia caido en el scroll con las flechas, aunque el overflow esta en hidden se podia seguir haciendo scroll con el teclado. :D

elkaoD

#7 muy chulens.

8 días después
voodoostock

refloto el hilo por no abrir uno nuevo, ya que tengo una duda con las transparencias.

intento imitar este efecto sin tener que tirar de photoshop:

justo el efecto donde pone power full. Lo he intentado con text-shadow a modo de contorno y el color de la letra: transparent, pero no cuela. No consigo dar con la clave, a ver si alguien puede echarme una mano. Intento no usar photoshop ya que una vez conseguido el efecto, si se puede, meterle transitions, animations y demás lindezas del css3.

a lo máximo que he llegado a sido a esto, intentando imitar el efecto, pero sigue sin convencerme, abría alguna manera de que el <h1> se salta el background del div y salte al fondo del siguiente div?
http://jsfiddle.net/xzCTY/1/

3 respuestas
Mujiwara

#11 http://jsfiddle.net/xzCTY/3/
Si lo pones centrado te servirá y no se notará mucho :p

Edito:
Agregando en la etiqueta h1

background-size:250%;

Arreglas que el fondo quede bien expandido.

Zuki

#11 No se por que te tienes que ver obligado a no hacerlo con photoshohp, es mucho mas viable y menos engorro, Tambien puedes buscar una fuente que de ese estilo.

taltal

#11 creo que había una fuente que imitaba ese estilo de recorte, pero no se ni si funcionaba ni la guarde, de todos modos yo tiraria de imagen png para hacer solo ese cacho, te ahorraras tiempo y posibles problemas con navegadores si existe la tipografía esa...

Usuarios habituales

  • taltal
  • Zuki
  • Mujiwara
  • voodoostock
  • elkaoD
  • eXtreM3
  • fer