Cómo utilizar una imagen de fondo como una bala lista de CSS

Con una regla CSS simple, se puede utilizar cualquier imagen de fondo que le gustaría como una bala por una lista desordenada. Aquí es cómo hacerlo.

Instrucciones

1

La imagen presenta una lista con viñetas normal antes de cualquier regla CSS se aplican a él.

2 Usted no tiene que cambiar nada sobre el código HTML que crea la lista. Sólo tiene que utilizar CSS para cambiar su apariencia.

3 Preparar el gráfico que va a utilizar como imagen de fondo. En este ejemplo he usado un gráfico que es de 15 píxeles de ancho por 48 píxeles de altura. La imagen se centra verticalmente en el centro de los 48 píxeles. Es importante centrar el gráfico y hacer la imagen más alto de lo esperado a necesitar. Usted verá por qué en un momento.

4 Escribir las reglas CSS que agregarán el gráfico a su lista. Con el selector de ser LI, es necesario configurar la lista de estilo a ninguno. Que elimina la bala normal. A continuación añadimos una regla para el fondo LI. Dar la URL de la imagen, configurarlo para no repetir, a continuación, situarlo en la posición horizontal a la izquierda y en el centro verticalmente. Por último, añadir un poco de padding-left para hacer espacio para el gráfico a la izquierda de cada elemento de la lista.

Aquí está la regla de CSS:

li {

list-style: none;
background: url(bullet.gif) no-repeat left center;
padding-left: 20px;

}

5


Usted también puede querer manipular la colocación de toda la lista en relación con la parte izquierda de su contenedor o en relación con la posición de cada elemento de la lista.

He aquí una regla que he usado en este ejemplo:

ul {

padding: 5px;

}

La imagen muestra la lista final.

6


Prometí a explicar por qué el gráfico debe ser más grande en la altura de lo que espera a necesitar. Muchos usuarios tienen que aumentar el tamaño del texto en las páginas web con el fin de leerlo. Usted quiere que su gráfico para permanecer en el lugar, incluso cuando se amplía el texto. Mientras los elementos de la lista no se hacen tan grandes que requieren dos líneas para mostrar, la imagen de fondo se mantendrá en su posición. Ver la imagen para una vista de la lista ampliada tres veces.

Consejos y advertencias

• Hay un método de uso de una bala gráfico en un elemento de la lista que reemplaza la bala normal con una imagen utilizando la propiedad list-style. Usando la propiedad list-style para agregar las cargas de un gráfico de la imagen en el código HTML donde podría darse el texto alternativo. Dado que la bala es meramente decorativo, es mejor utilizar este ejemplo, poniéndolo en la página como imagen de fondo por lo que no hay ningún problema en cuanto a si o no para dar el texto alt de la imagen.