I want to add a background color to my labels. How do I do that with Carto-CSS in Tilemill or with Mapnik?


#marker_labels {
  text-name: "[name]";
  text-size: 20;
  text-fill: #FFFFFF;
  text-allow-overlap: true,

Mapnik XML

<TextSymbolizer face-name="Air Soft Cond Heavy" size="20" fill="#ffffff" allow-overlap="true" ><![CDATA[[name]]]></TextSymbolizer>

Here is a example on how the label should look like (ignore the line to the label):enter image description here


If I understand question correctly you should use Carto-CSS 'text-halo' operator:


If you need background as a rectangular behind the text, you should use 'shield' operators.

  • 1
    Yes, I want to use a rectangular background behind the text. That's why halo will not work. I added a sample image to my question to clarify. If I understand shield right, I always have to use a image for it, right? – ustroetz Jun 18 '14 at 12:52
  • Yes, you use 'shield-file' operator to determine your image as a background, but in this case, your background will have a fix size.. – mikhukh Jun 18 '14 at 13:34

Here is a sample code for putting up background with CSS :

/* CSS by GenerateCSS.com */ background-color: #dfdff2; background-image:url(""); background-repeat: no-repeat; background-attachment: fixed; background-position: center center;

I used a CSS generator with this one: http://www.generatecss.com/css/background/

  • I am trying to do this with Tilemill. Tilemill uses Carto-CSS, which is different than CSS. As far as I know Carto-CSS does not have a background syntax. – ustroetz Jun 25 '14 at 8:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.