Increasing the opacity of a background image when a new div is added

While working on my chatbot assignment, I set the background image opacity to 0.02.

Unexpectedly, as I input more messages, the opacity gradually increases all the way to 1.

Although this effect is pretty neat, it wasn't my original intention.

Something like this:

https://i.sstatic.net/urmOm.gif

How do I prevent this from happening?

Upon clicking the Send button, the following code gets appended into <div id="chatbox">:

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

I attempted to set the opacity of <div class="userDiv"> to 0.02 to match the background image opacity, but then my messages became invisible.

I have not been able to find a solution to this issue.

Thank you.

View the Jsfiddle example here: http://jsfiddle.net/qn7yhrds/9/

jqueryhtmlcssopacity

Answer №1

Thanks to the help of @Temani Afif, I was able to successfully resolve this issue.

The problem stemmed from the following code snippet:

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 had inadvertently set all div elements to have the same background image, causing each new div to stack another image on top of the previous one and increase the opacity.

The solution to this issue can be found here: http://jsfiddle.net/Lvx5dowp/4/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize Bootstrap 3 Datepicker version 4 to easily set the date using Moment.js or Date objects

I'm currently utilizing the Within my project, I have a datetime picker labeled as dtpFrom <div class='input-group date ' id='dtpFrom'> <input type='text' class="form-control" /> <span c ...

javascriptjqueryhtmltwitter-bootstrap-3

When you click on the button, the section will not be displayed

I'm facing an issue with my code. I have a set of five buttons and corresponding sections. When a button is clicked, the active and active-btn classes are supposed to be added to that button as well as the corresponding section element with the same i ...

javascripthtmlcsssass

At what point is the rendering process of ng-switch completed?

I am currently utilizing ui-router and facing a challenge in instantiating a widget that requires a DOM element specified by its id as a parameter. The specific DOM element is nested within a <div ng-switch>, and I need to ensure the widget construct ...

javascripthtmlangularjsangular-ui-routerng-switch

I'm having trouble applying CSS stylings to my components in my React project. What could be the issue causing this?

As a React beginner, I am facing issues with getting my CSS to work properly in my project. I know that CSS is not used directly in React, but rather interpreted as JavaScript using webpack and babel. What have I tried? I attempted to make changes to my w ...

javascriptcssreactjswebpackcss-modules

Adjusting the height of a GAS iframe in WordPress with iframe-resizer: A step-by-step guide

I would like to embed an iframe of my Google Application Script Web into my WordPress site without the scroll bar. Refer to the image below for context. https://i.stack.imgur.com/7L6Tw.png I encountered an error message while attempting to use the iframe ...

javascripthtmlgoogle-apps-scriptiframeiframe-resizer

Issue with HTTP headers not being effective in $.AJAX request

Regardless of the method I attempt to use for setting headers in an AJAX call, and no matter which header I set, every time there is a header present, the AJAX call is aborted and does not go through. However, if I try to make the call without setting any ...

javascriptjqueryajaxhttpget

Displaying a pop-up message over the "Login button" for users who are not currently logged in

I am currently in the process of developing a website using node.js and express. I have successfully integrated all the login functionality through passport, allowing users to easily log in or out by utilizing res.user. However, I now want to enhance the ...

javascriptjquerynode.jsajax

Step-by-step guide on achieving 100% height for the <main> element in a Material UI drawer demo

I have a question regarding the Material UI drawer. In my project, I am trying to change the background color of the main tag. However, the main tag's height is restricted to the content inside. Check out this link for reference Setting the height t ...

htmlcssreactjsmaterial-ui

Material UI - Array of Chips

I have been working on creating a ReactJS component that displays an array of chips with unique styling for each one. To achieve this, I created individual makeStyles classes for the chips. However, I encountered difficulties in dynamically changing the cl ...

javascriptcssreactjsmaterial-ui

Implementing Bootstrap 3.1 to prioritize main content at the top on mobile devices

Below is the grid structure that I am working with <div class="row"> <div id="A" class="col-md-3"> <div class="alert alert-info">A</div> </div> <div id="B" class="col-md-6"> <div class=" ...

htmlcsstwitter-bootstrapgrid

Verify if an item is currently within the user's view

I'm encountering a new issue with a menu I'm working on. My goal is to hide the menu when the user clicks outside of it. The challenge lies in the fact that the menu is always visible but translated to the right of the element, making it not dire ...

javascriptjqueryhtmlcss

Is there a way to cancel an AJAX request during the ajaxStart or ajaxSend event in jQuery?

In my project, I have implemented numerous $.post methods and now I need to check the session in each request to handle my page based on session value. However, I don't want to modify all the existing methods ($.post). Instead, I would like to check t ...

javascriptjquery

Mobile Mode Issue with Bootstrap 4 Navbar Example

Currently, I am exploring the Bootstrap material and trying to understand how to integrate their content with a jinja2 file that I am preparing for a django project. Upon attempting to copy and paste their example code (specifically this example http://get ...

javascripthtmlcssjinja2bootstrap-4

Is there a way to create a dropdown menu that transforms into a burger icon on smaller screens, while still housing all of my navigation items within it?

I'm currently working on a segment of my header that includes a navbar with 3 links, as well as a dropdown menu listing additional functionalities. Here is the current code I have: <div class="col-md-4 pt-4"> <nav class="navbar ...

javascripthtmlcssbootstrap-5

Navigate to the end of the progress bar once finished

I have a solution that works, but it's not very aesthetically pleasing. Here is the idea: Display a progress bar before making an ajax call Move the progress bar to the end once the call is complete (or fails) Keep the progress bar at 90% if the aj ...

javascriptjqueryajax

An unusual html element

During a recent exploration of a website's code using the inspect tool, I stumbled upon a tag that was completely unfamiliar to me. <gblockquote></gblockquote> I've come across a blockquote before, but never a gblockquote. Interest ...

javascripthtml

Set the background of the vue widget to be completely see-through

I have a project where I am creating a widget using Vuetify, and embedding it into another website in the following way: <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="component-styl ...

javascripthtmlcssvue.jsvuetify.js

Inserting an additional element through a button click

I have come across an issue that I need help with: On this particular page (please note it is not my own, just using it as an example) you can see a standard expandable menu listed under non-accordion (standard expandable menu) What I am wondering is ...

jqueryaccordion

Transferring data from a class method to a React component

Situation: In a React component, I have a class with its own methods that is instantiated. What I'm needing: One of the methods in the class changes the value of an input (referred to as `this.$el`) using `.val()`. However, I need to pass this value ...

javascriptjqueryreactjsclassdata-binding

Struggling with creating text that adapts to various screen sizes when displayed

As someone who is new to HTML/CSS, I recently developed my first website using the Cargo platform. Within a section on my site featuring various videos, I encountered difficulty in properly positioning the titles over them while ensuring they remain respo ...

htmlcss