Foros de daboweb
MULTIMEDIA, Video digital, Grabación, Diseño gráfico, Diseño web, Programación => Webmasters - Diseño Web - Programación - Diseño gráfico => Mensaje iniciado por: Turbia en 20 de Junio de 2007, 07:10:41 pm
-
Hola foreros.
Recientemente descubrí el libro The Art & Science of CSS (http://www.sitepoint.com/books/cssdesign1/) y me picó la curiosidad de relanzar un portal de tutoriales comenzando el diseño desde 0.
Todo fue bien hasta que decidí poner un fondo en la parte inferior derecha. Se trata de una imagen con transparencia en formato PNG. El caso es que se posiciona correctamente, pero en firefox algunas veces la imagen aparece en color gris :???:, además me gustaría hacer que no interfiera con el texto de la web, es decir, que el texto negro esté en primer plano y el fondo en segundo. Para realizar esto último he probado a asignar un z-index mayor a la capa de #contenido que a la capa #vida que es la que contiene la imagen, pero sin obtener resultado sastisfactorio.
¿Alguien sabe cómo puedo solucionar este problema? se aceptan también críticas/sugerencias para la web.
La dirección es http://turbia.net
Un saludo.
-
Solucionado.
Simplemente había que quitar la transparencia de la imagen y colocar:
background: url('./img/vida.png') no-repeat right bottom;
en la capa #contenido.
-
GRacias por comentarlo amigo y sobre la web...ya sabes mi opinión XD, gustándome.com, a ver si te vemos más por el foro que ya son años cruzando mails -;)
Un abrazote y dale a muerte a turbia que lo veo muy bien planteado
-
Aún no he conseguido salirme con la mía, y la imagen no parte de la línea del mismo color, sino del final :S
Cuando encuentre la solución la posteo aquí, o si alguien me dice como resolverlo será un placer. Podéis ver a lo que me refiero en:
http://turbia.net/articulos/
Quiero que quede como en
http://turbia.net/contacto/
Un saludo y gracias por los ánimos ;)
-
#central {
background: none;
}
#contenido {
background: url('/img/vida.png') no-repeat right bottom;
}
Solucionado añadiendo este código :haha:
-
Gracias por comentarlo :)
-
Resulta que en páginas donde el texto no llegaba abajo del todo la imagen salía desplazada hacia arriba. Finalmente he conseguido solucionarlo colocando la iamgen de fondo en la capa "central" que corresponde al grueso de la página y poniendo fondo blanco al "pie" de la página, de forma que tapa la imagen. Aunque aún sale una pequeña línea de puntos en la última fila de píxeles.
Ahí va el nuevo código.
#pie {
background-color: #FFF;
}
#central {
background: url('/img/vida.png') no-repeat right bottom;
}