Todo lo que necesitas saber sobre el posicionamiento de fondo (background-position) una propiedad de las CSS que nos permitirá poner diferentes imágenes a nuestras listas haciendo uso de la etiqueta a y sus atributos.
A esto me refería un poco con el “meme” de ser un poco quisquilloso con las cosas, al momento de hacer una lista ó alguna cosa que requiera roll-over el “pequeño” espacio que queda entre la carga de dos imágenes me volvía loco, no me gustaba 
pero era la única forma que había encontrado de hacer eso, después metiéndome más a fondo en esto descubrí que se podía hacer solamente jugando con la posición del fondo, eso es lo que veremos en este tutorial.
11 comentarios para Background Position
¡Genial tutorial brother! Es increíble lo accesibles que podemos convertir nuestros links con una simple imagen y un cambio de posicionamiento, ¿qué no?Y no está de más recordar que estos efectos pueden aplicarlos, no solo a <a>, sino a cualquier tag que quieran usando las mismas pseudo-clases (pienso en formularios ene stos momentos).
¡¡Un saludo!!
Muy bueno el tuto!
Lo wapo sería aprender mediante php a hacer ke el current fuera automatico, me explico:
aki para ke el icono te salga de current tienes ke ponerle id=”current” no? seguro ke hay alguna forma de hacer ke esto lo haga php solito, osea, ke la sección ke enlace a la pagina en la cual estamos aparezca como id=”current”… o me ekivoco?
por lo demas… esta fantastico, ya no usare mas imagenes distintas para los efectos hover, visited, etc
metal_orgy creo ke no es cierto lo ke dices. hasta ie6, por ejemplo, no podias poner un li:hover o un li:visited. creo ke estas propiedades son para segun ke tags en concreto!
Si, olvidé mencionar que, para variar, IE no gusta de las pseudo-clases; pero no se sacrifica la accesibilidad por usarlos. Me explico: Si agregas un li:hover a tu diseño para cambiar de color de fondo, funcionará en todos los navegadores menos en IE6 o menos. ¿Resultado? IE6 no tendrá el efecto, pero seguirá viendo la información mientras que todos los demás navegadores disfrutarán de un bonito efecto en :hover.
Creo que debemos de dejar de buscar que nuestra web se vea exactamente igual en IE que en los demás navegadores y simplemente aceptar que IE jamás será tan bonito como los demás (pero sin sacrificar la información para este navegador, claro está).
¡Excelente truco! Bueno, mas que truco es un excelente manejo de CSS. Apenas tenga un tiempito lo implementaré en el nuevo diseño de mi web
Ah, por cierto, estoy de acuerdo con metal_orgy, IE jamás será tan bonito como los demás jejeje. ¿Ya actualizaron al Firefox 2.0.0.4? =P
wua!!! la verdad que sos increible cada ves que entro al blog me sorprende una caso nueva… segui asi
nos vemos,
Lucas.
No tiene mucho que aprendi esta técnica, pero aca me quedan más claras algunas cosas.
Excelente tutorial!
Buen material como siempre, deberias agregar una seccion en tu blog para tus tutoriales
Saludos
Buen tutorial amigo, gracias por el ^_^
Olá,
Parabéns pelo tutorial, está bem elaborado e ilustrado.
Mas tenho dois reparos a fazer:
1. A posição do CSS shorthand é Vertical – Horizontal
que significa TOP > RIGHT > BOTTOM > LEFT igual a
ao rodar dos relógios. O deseho está tem de ser corrigido.
2. background-position: 0px 0px; é igual a background-position:0 0;
Lastima que no acabe de funcionar en internet explorer 6
buen trabajo