¿Cómo poner una imagen como bullet point con CSS?

En este tutorial de HTML/CSS te enseñaremos cómo colocar una imagen como bullet point (viñeta). Esto quiere decir que podrás personalizar tus listas con pequeñas imagenes pixel y más.

¿Cómo poner una imagen como bullet point con CSS?Siempre es bueno probar el código en tu editor de texto antes de subirlo a tu página web o blog. Así que te recomiendo utilizar el bloc de notas, Sublime Text o cualquier otro editor. Creamos un archivo .html, y probaremos el siguiente código. Podemos descargar imagenes pixeles para bullet points de aquí.

Paso 1: Crear la lista de HTML

Lo primero que tenemos que tener es nuestra lista creada, la cual se realiza con el siguiente código.

Cómo poner una lista con imágenes en HTML y CSS


Paso 3: Agregar CSS para poner imagen como bullet point

En este paso, debemos colocar el código de CSS para aplicar a todas las listas una misma imagen. La imagen que seleccionemos debe estar en la misma carpeta que el archivo de texto. De no ser así, se deberá poner todo el URL completo hacia la imagen. En este caso, nuestra imagen se llama bulletrombo03.png.

Lista de datos con imagen como viñeta con CSS


Paso 4: Agregar diferentes imagenes para cada lista

Ahora lo que puedes hacer es crear estilos de listas para aplicar diferentes imagenes a cada lista. Esto se realiza colocándole una clase a cada lista. En este ejemplo, llamamos a nuestras clases de lista: lista1 y lista2. Cada una, tiene su código de CSS ul.lista1 para aplicar la imagen respectiva.

Lista de texto con imágen como viñeta con CSS

Suscríbete a nuestra lista de correo

Etiquetas:,

Publicidad

Deje un comentario