Comunidad PHPeros
Lenguajes => CSS => Mensaje iniciado por: Mixvice en 07 de Octubre de 2011, 21:03:52 pm
-
Hace un rato westest publico el posible uso de los fondos multiples en el post de un usuario, seguido a esto Siqui y martin comentaron que si podia poner un tutorial sobre esto, y bueno me le adelante un poco espero no se enoje (xD).
Una nota importante de este tuturial es que solo funciona con navegadores actualizados, como chrome, firefox y safari. Desconosco si funciona en Opera y como es de esperarse, no funciona en ninguna versión de IE
Como sabemos en css para poner múltiples fondos de imágenes teníamos que recurrir a 3 divs y 3 estilos diferentes:
<div id=”mifondo”>
<div id=”mifondo2”>
<div id=”mifondo3”>
Lo que sea
</div>
</div>
</div>
<style type="text/css">
#mifondo{
Estilo
}
#mifondo2{
Estilo
}
#mifondo3{
Estilo
}
</style>
Pero ahora con css3 nos podemos ahorrar unas cuantas líneas de código tanto en el css como en los div que están “de más”:
<div id=”mifondo”>
Lo que sea
</div>Y el css
<style type="text/css">
#mifondo{
background: url(mifondo1.png) bottom no-repeat,
url(mifondo2.png) right no-repeat,
url(mifondo3.png) center repeat;
}
</style>
Usamos las propiedades URL, bottom, right, no-repeat, center y repeat.
URL: la usamos para indicar en enlace de nuestra imagen que queremos como fondo.
Bottom, right y center es para definir la posición en la que se ve nuestro fondo si es un div pequeño o con un tamaño definido, por ejemplo si yo quiero que solo se vea la parte del centro de nuestro fondo, usamos center.
No-repeat es para indicar que nuestro fondo no se va a repetir.
repeat Es para indicar que nuestro fondo se va a repetir.
También usamos una , después de cada fondo, esto es para indicarle al navegador que estamos usando un fondo nuevo después del primero, es muy importante usarlas pues de lo contrario nuestro css nos dará error y no se visualizará correctamente.
Como ven la última línea del css no termina con , si no con ; esto creo que queda de más, pero es para cerrar el estilo
El orden de las imágenes se muestran según el orden que tienen en el css, en este caso la imagen que estaría detrás de las demás sería “mifondo3.gif” y la imagen que estaría delante de todas “mifondo1.png”
Si tienen dudas no se las guarden, pregunten :)
-
K+, me servirá algún dia :P
Ah, y para que funcione con IE usa chrome frame
-
Esto es un robo! :P
Pero los fondos multiples funcionan con IE9
-
Esto es un robo! :P
Pero los fondos multiples funcionan con IE9
No vas a cumplir tu misión de hacer que usen IE9, Chrome Rlz!
---
Excelente el tutorial, ya lo sabia básicamente como iba pero nada mal para repasar conceptos.
Saludos
-
Esto me da una idea, por ejemplo, quiero hacer un logo rotativo, pero como seria el js para que roten los logos ? con que roten entre 2 o 3 es suficiente.
-
Hola,
¡Gracias Manuel!. Solo me queda una duda. He puesto en practica el tutorial y veo que no salen las imagenes al 33,33%. Me explico; resulta que las imagenes del top y del bottom son mas grandes en altura que la del centro ocupando tamaños, por ejemplo, del 40% -20% - 40% respectivamente.
Por cierto, no te llevas un K+, te llevas 2 por hacer un tutorial digamos que de forma "privada" y tan bien explicado tal y como esta.
Un saludo,
Siquillote.
-
Hola,
¡Gracias Manuel!. Solo me queda una duda. He puesto en practica el tutorial y veo que no salen las imagenes al 33,33%. Me explico; resulta que las imagenes del top y del bottom son mas grandes en altura que la del centro ocupando tamaños, por ejemplo, del 40% -20% - 40% respectivamente.
Por cierto, no te llevas un K+, te llevas 2 por hacer un tutorial digamos que de forma "privada" y tan bien explicado tal y como esta.
Un saludo,
Siquillote.
No te entendi siqui xD pero si quieres ajustar una imagen al tamaño que quieras puedes cambiar el center, top o bottom por pixeles.
Ejemplo; si quieres mover la imagen hacia arriba basta con poner -40px, esto subira la imagen de fondo xD. Si no es esto pues no se a que te refieres x.x
-
No te entendi siqui xD pero si quieres ajustar una imagen al tamaño que quieras puedes cambiar el center, top o bottom por pixeles.
Ejemplo; si quieres mover la imagen hacia arriba basta con poner -40px, esto subira la imagen de fondo xD. Si no es esto pues no se a que te refieres x.x
Hola,
Si si, me refería justamente a eso, de nuevo, muchas gracias. Por cierto, te doy tu otro Karma :).
Un saludo,
Siquillote.
-
Por esto y mucho más amo las novedades de CSS3 :D