An illustration of a pointing hand

While the browser will automatically change the appearance of the cursor in the context of many UI elements - switching it to a pointing hand when over links, for example - there are occasions when you’ll want to change it manually for particular operations: a compass cursor to indicate that an element may be moved, for example. This is commonly achieved through ; in particular, the cursor property for an element.

A black and white photograph of a road disappearing into the distance

While illustrative images are now well-served in HTML5 and CSS with regards to high-DPI displays, with broad browser support for the picture element, srcset and sizes, Retina background images have been largely neglected during these advances. As background images are often quite large (in both pixel count and file size), this is particularly bothersome. While there has been an intermediate solution available for a long time, there’s now an even better one.