Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Cross Browser Solution for Image Marker in CSS
In order to display an image marker properly in all browsers, a cross-browser solution is required. The text alignment after the image marker is sometimes distorted. To achieve a uniform output, we specify the image to be used as a marker as background and align it accordingly.
Syntax
ul {
list-style-type: none;
}
ul li {
background-image: url("image-path");
background-repeat: no-repeat;
background-position: x-position y-position;
padding-left: value;
}
Example 1: Basic Image Markers
The following example demonstrates how to create custom image markers for list items −
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
font-size: 1.5em;
}
ul li {
background-image: url("/images/spring.png");
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 24px;
}
</style>
</head>
<body>
<h2>Tutorials</h2>
<ul>
<li>Java</li>
<li>C#</li>
<li>C</li>
<li>C++</li>
<li>Spring</li>
<li>Hibernate</li>
</ul>
</body>
</html>
A list of tutorial topics is displayed, each with a small Spring framework icon as a custom bullet marker positioned to the left of the text.
Example 2: Styled Container with Image Markers
This example shows how to combine image markers with additional styling effects −
<!DOCTYPE html>
<html>
<head>
<style>
ul {
box-shadow: inset 0 0 8px orange;
list-style-type: none;
padding: 12px;
padding-left: 20px;
margin: 2px;
font-size: 1.35em;
}
ul li {
background-image: url("/images/css.png");
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 40px;
font-style: italic;
}
</style>
</head>
<body>
<p>Requirements:</p>
<ul>
<li>Tutorials</li>
<li>Interview QA</li>
<li>Quiz</li>
</ul>
</body>
</html>
A styled list with an orange inset shadow border displays three items in italic text, each with a CSS logo icon as the marker.
Key Points
- Always set
list-style-type: noneto remove default bullets - Use
background-positionto control marker placement - Adjust
padding-leftto provide space for the image marker - Use
background-repeat: no-repeatto prevent image repetition
Conclusion
Using background images as list markers provides consistent cross-browser rendering and better control over positioning. This method ensures proper text alignment and uniform appearance across different browsers.
Updated on: 2026-03-15T13:50:09+05:30
224 Views
Advertisements