Search code examples
htmlcssangularsprite-sheetng-style

Formatting ng-style correctly for background-image shorthand

There's something not right with the below line. I have my height and width correctly showing up in my app. If I include + character.offsetX + 'px' + character.offsetY + 'px' the background-image styling does not appear.

Character.offsetX and offsetY are hardcoded numbers supplied from the character object.

The examples I've found online are quite simple and don't show how to do the shorthand version of background-image for setting the background-position

<li *ngFor="let character of this.characterList" [ngStyle]= "{'height':'50px', 'width':'50px', 'background-image':'url(' + character.fullImagePath + ')' + character.offsetX + 'px' + character.offsetY + 'px' }"
Solution

  • background-image does not allow setting other background-* properties - you'll need to use the background shorthand for that instead:

    <li *ngFor="let character of this.characterList" [ngStyle]= "{'height':'50px', 'width':'50px', 'background':'url(' + character.fullImagePath + ') ' + character.offsetX + 'px ' + character.offsetY + 'px' }"