search

huguenot412 / hots-map-drafter

0 stars 0 forks source link

Repeating background image #3

Open huguenot412 opened 7 years ago

huguenot412 commented 7 years ago

battleground.component.html

<div class="battlegroundImageContainer col-md-5"
    [ngStyle]="{
        'background': 'url(../../assets/images/battlegrounds/' + battlegroundsService.selectedBattleground.imgURL + '.jpg)',
        'background-repeat': 'no-repeat',
        'background-position': 'center center',
        'background-size': '120%'
        }">

Issue: despite setting background-repeat to "no-repeat" it will occasionally still repeat. Unsure what triggers this.

auslan commented 7 years ago

@huguenot412, my guess would be that the initial value of repeat kicks in when using the shorthand. I would recommend not mixing the exact attributes and the shorthand, use one or the other. I have not seen this firsthand in Pale Moon but I have run into different shorthand oddities before.

diff --git a/src/app/battleground/battleground.component.html b/src/app/battleground/battleground.component.html
index a37270c..75bfe02 100644
--- a/src/app/battleground/battleground.component.html
+++ b/src/app/battleground/battleground.component.html
@@ -6,6 +6,8 @@
     <div class="battlegroundImageContainer col-md-5"
         [ngStyle]="{
             'background': 'url(../../assets/images/battlegrounds/' + battlegroundsService.selectedBattleground.imgURL + '.jpg)',
+            'background': 'url(../../assets/images/battlegrounds/' + battlegroundsService.selectedBattleground.imgURL + '.jpg) no-repeat',
+            'background-image': 'url(../../assets/images/battlegrounds/' + battlegroundsService.selectedBattleground.imgURL + '.jpg)',
             'background-repeat': 'no-repeat',
             'background-position': 'center center',
             'background-size': '120%'