Search code examples
jqueryhtmlcssopacity

Background image opacity increase when adding new div

I am doing my chatbot assignment and I set my background image opacity to 0.02.

However, as I enter more message, the opacity increased until 1.

This is very cool but I never intend to do that.

Just like this:

enter image description here

How can I stop that?

When the Send button is clicked, following code is append into <div id="chatbox">:

<div class="userDiv"><p class="userText"><span>' + rawText + '</span></p></div>

I tried to set the opacity of <div class="userDiv"> to 0.02 same as the opacity of background image, but then I can't see my message already.

I couldn't find any answer regarding to this issue.

Thank you.

Jsfiddle: http://jsfiddle.net/qn7yhrds/9/

Solution

  • I managed to solve this problem thanks to @Temani Afif

    The problem caused by the code below:

    div::after {
  content: "";
  background: url("https://cdn.pixabay.com/photo/2014/08/07/15/20/newspaper-412452_960_720.jpg");
  opacity: 0.02;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}

    I defined all the div to have the background image.

    So each time I add a new div, a new background image stack over the previous background image, causing the increase of opacity.

    Solution: http://jsfiddle.net/Lvx5dowp/4/