0

I'm writing a browser game and need help with sass and background images.
I have a world with terrain (grass, water) and entities (player, monster). This is rendered in a big html table and each td gets data-attributes assigned. 

<td data-y="5" data-x="23" data-terr="1" class=""></td>
<td data-y="5" data-x="24" data-terr="0" class="player"></td>

Based on those attributes the css then applies the correct images.

table td {
      padding: 0;
      background-size: 100% 100%;
      image-rendering: pixelated;
  &[data-terr="0"] {
    background-color: #060;
    background-image: url(#{$spritedir}/grass.png);
  }
  &[data-terr="1"] {
    background-color: #666;
    background-image: url(#{$spritedir}/water.png);
  }
  &.player {
    background-image: url(#{$spritedir}/hero.png);
  }
}

Now the problem is that the field where the player class is applied, the player overrides the background-image and the terrain vanishes.

But i want to stack the images. Like this:

background-image: url(#{$spritedir}/grass.png),
                  url(#{$spritedir}/hero.png);

Is this possible with css/sass? I mean without listing every terrain/entity combination.

Shylux
  • 1,163
  • 2
  • 16
  • 31
  • Sass only compiles to CSS, so it has to be a feature of CSS. If you want multiple background images, you have to specify every combination of background images. – cimmanon Oct 04 '15 at 00:25
  • 1
    Possible duplicates: http://stackoverflow.com/questions/12645962/sass-using-two-each-lists-in-scss and http://stackoverflow.com/questions/12937503/multiple-values-for-one-property-with-variable-argument-lists-in-sass – cimmanon Oct 04 '15 at 00:36

0 Answers0