0

I have a div in my html page showing some content dynamically, based on some knockout code. Here it is how it's defined:

<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" src="app/Images/horse.jpg">-->
            <img width="256" height="256" data-bind="attr:{src: 'app/' + person.srcImage}">
        </header>
        <footer>
            <!-- $data.firstName-->
            <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 my css file I have the relative:

.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;
}

so, I managed to achieve the blocks.png image appearing as background of my div as I wanted. I want now to modify the opacity of this image, but if I apply some opacity setting in .background-image I affect the whole div instead of only the image. How can I achieve this?

Tarta
  • 1,729
  • 1
  • 29
  • 63

2 Answers2

0

how i did it with my own website was creating a new div and put your div inside it. then change the background-color of the div with background-color:rgba

that is how i did it. but i don't know if it works for you.

0

Just add class like this

.opacity {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

then you can use this class with your background-image class

myeongsookim
  • 41
  • 8