I am currently facing a challenge in adding a background image to a div that contains some radio buttons and updating it dynamically with Angular based on the current page.
app.controller('thingCtrl', function ($scope, $rootScope, $routeParams) {
console.log("Inside thingCtrl");
$scope.title = "Thing";
$scope.talkingPointsImage = "img/thing.svg";
}main:after {
opacity: 0.25;
width: 200px;
height: 200px;
top: 0;
left: 0;
position: absolute;
z-index: -1;
content: "";
}<div class="main" style="background: url({{talkingPointsImage}});">
<div class="talking-points">
<h2>{{title}}</h2>
<ul>
<li ng-repeat="issue in subCategories">
<input type="radio" name="radio" ng-model="question.stance" ng-value="-1"> {{issue.issue}}
</li>
</ul>
</div>
</div>
<!-- begin snippet: js hide: false -->I am encountering difficulties in achieving the desired display. The data binding using {{}} is functioning properly, but I am struggling to achieve the correct sizing.
The image is being displayed without transparency and is not correctly sized.
1) It should have transparency to create a faint appearance and stay in the background without obstructing the foreground information, which should remain clickable.
2) It should be resized appropriately to fit behind the information, possibly around 200px by 200px.