I am currently working on a dynamic content display in my HTML page using some knockout code. The setup looks like this:
<section id="picturesSection" class="background-image" data-bind="foreach: { data: people, as: 'person'}">
<div class="cardPositioning panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title" data-bind="text: person.Name"></h3>
</div>
<header>
<img width="256" height="256" data-bind="attr:{src: 'app/' + person.srcImage}">
</header>
<footer>
<p class="nameEmployeePos" data-bind="text: person.DateOfBirth"></p>
<p class="nameEmployeePos" data-bind="text: person.Role"></p>
<p class="nameEmployeePos" data-bind="text: person.Email"></p>
</footer>
</div>
</section>
In the CSS file, I have defined the following for the background image:
.background-image {
background-image: url("../Images/blocks.png");
width: 100%;
z-index: 10;
background-position-x: 1400px;
background-position-y: 400px;
background-repeat: no-repeat;
}
Now, I want to adjust the opacity of the image without affecting the entire div. How can I achieve this?