Posición vertical de un Background

[rickyl]

Hola,

Primero que nada, échenle un vistazo a esta pagina 3djuegos.com

Si recorren el menú principal, verán que cada sección, el banner superior le muestra un color diferente.

Se trata de una sola imagen (background) de 2 px de ancho con los diferentes colores incluidos a 73px de altos cada uno.

Esto se usa para evitar el tener que hacer un fondo para cada sección y que la misma no tarde mucho tiempo en cargar. Al cargar una sola imagen y cambiar de sección ya la imagen está presente.

La pregunta es… ¿Cómo se posiciona con CSS cada color un div partiendo de que estamos trabajando con una sola imagen y varios colores, queriendo destacar solo uno?

En los menús de imagen se usa también esta idea para evitar que dure unos segundos al cargar cada botón.

Saludos y gracias.

[Triby]

background-position:vertical horizontal; en tu caso:

background-position:-73px 0;

Solo haz tus pruebas para el resto.

[rickyl]

Gracias, Triby,

Encontré un tutorial que da una ejemplar explicación del tema, pero por politica del foro no puedo aún postear el URL de la página.

[kseso?]

Esa técnica se conoce como "sprite"
Y recuerdo que en www.librosweb.es tienen una explicación clara y detallada sobre el particular.

[rickyl]

Efectivamente, en esa misma web fue que vi la explicación.

Otra cosa... Saben ustedes como hacer que una imagen se encoja (achicar) dentro de un espacio y que se sigan viendo sus extremos?

Me explico.

En los menus, por ejemplo, se usan imágenes que se sustituyen por otras al posicionar el puntero del mause sobre ellas, dichas imágenes suelen ser algo grande horizontalmente y se ajustan al tamaño del texto que forma el link del menu.

¿Qué opciones se emplean en el CSS para adaptar esas imágenes para que tomen ese tamaño?

[Mikmoro]

Aquí tienes un ejemplo (pasa el ratón por las opciones). Verás que el fondo está adaptado a cada tamaño.