Hey there, I'm currently working on incorporating interactive buttons into my website to give users the ability to customize the background.
I've been experimenting with Angular to achieve this feature. So far, I've managed to change the background color in a couple of different ways (such as switching to a single color or a gradient)... however, I'm facing some challenges when it comes to changing the background image with one button and altering the background gradient and size simultaneously with another button.
Here's what I've tried so far:
<body ng-style="myStyle">Success:
<input type="button" class="bg stripes" ng-click="myStyle={background: 'red'}">Issue:
<input type="button" class="bg numbers" ng-click="myStyle={background-image:'url(../images/count2.png)'}">Success:
<input type="button" class="bg stripes" ng-click="myStyle={background:'linear-gradient(45deg, #379690 25%, #3aa19b 25%, #3aa19b 50%, #379690 50%, #379690 75%, #3aa19b 75%, #3aa19b)'}">Issue:
<input type="button" class="bg stripes" ng-click="myStyle={background:'linear-gradient(45deg, #379690 25%, #3aa19b 25%, #3aa19b 50%, #379690 50%, #379690 75%, #3aa19b 75%, #3aa19b)',background-size:'100px 100px'}">
Your assistance would be greatly appreciated! Thank you!