Custom css for background image

[cadon]

Is there a way to add custom css to a background image?
For a pixel art world map, zooming makes the map blurry. Adding the css-style image-rendering: pixelated; to the according <img> would resolve that, keeping the background image sharp and in style with the game.
Is there an easy way to add that css style to the background? Or is using something like .ext-datamaps-container-content .leaflet-map-pane .leaflet-overlay-pane img.leaflet-image-layer {image-rendering: pixelated;} in the general wiki css a good way to do it?

• Wiki with map for reference

[alex4401]

Sounds like something that should be defined in the data schema to be fair. Created #188 to track.

For now, you can use the rule from your message. It can go either into main site CSS or into MediaWiki:DataMaps.css - doesn't matter really (possibly the latter might take a moment longer to recache?). If needed, the selector can be additionally narrowed down with [data-datamap-id="573"].

[alex4401]

Update to my message above: Since v0.16.7 is now running on wiki.gg servers, you can leverage the new map classes to narrow down the selector: .map-Kingdom. The class is always prefixed with map- followed by the map's source page (i.e. "Map:Kingdom") without namespace (so "Kingdom").

[alex4401]

Added a pixelated property to backgrounds in 8d9d941 - it requires a new single background format though. I'll be requesting an update on wiki.gg's end by the end of the week (but I'll also apply the change to your map when it's done).

-	"image": "map.jpg",
+	"background": {
+		"image": "map.jpg",
+		"pixelated": true
+	},