Menu
Does anyone know a great way to have a custom list-stlye-image for retina displays? The usual background-size trick in a media query doesn't work for list-style-image.
843
The list-style-image CSS property sets an image to be used as the list item marker. It is often more convenient to use the shorthand list-style .
In the above output image, users can see the difference between the size of the list-style-image when we set sizes 30px and 10px. Approach 2: In this approach, we will set the image size by using the background-size property for the <li> element.
To accommodate high resolution/retina displays, you'll want to use an image that's 1280 pixels wide, which is what's referred to as “2x”. While the graphic will still display on the website at 640 pixels wide, you are doubling the pixel density by using an image that's double the size.
To create a bitmap Retina image you need to take a larger image, with double the amount of pixels that your image will be displayed at (200 x 200 pixels), and set the image to fill half of that space (100 x 100 pixels).
The best way to achieve this is to not use the list-style-image, but instead set a background-image for each li element in the list.
This way you can use the usual background-size tricks to allow for retina displays.
129
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
