The transparency of an image is being lost when it is used in a modal

I am facing an issue when trying to append a modal that contains only a transparent gif. The problem arises when the transparent background of the gif is not displayed properly. There seems to be no issue with the transparency settings of the gifs themselves. My goal is to create a loading screen with a black background and a transparent gif image. Below is the CSS class I am using for my modal :

.v--modal-overlay[data-modal="loading"] {
  background: black;
}

Here is the HTML code for the modals (I am utilizing the vue-js-modal library) : 

<modal name="loading" width="256px" height="256px">
          <img src="../../public/loading.gif" />
        </modal>

The expected look was supposed to be similar to this : https://i.stack.imgur.com/wlpIj.png

However, the actual result displays a white background instead of the desired black one: https://i.stack.imgur.com/MV0wM.png

htmlcssvue.js

Answer №1

.bg_black {
  background: #000;
  height: 100vh;
}

.bg_black img {
  position: absolute;
  width: 100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="bg_black">
  <img src="https://media.giphy.com/media/17mNCcKU1mJlrbXodo/giphy.gif">
</div>

It's important to remember that adding a transparent background to your gif can enhance the final output.

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

What is the best way to incorporate a button in my code that automatically triggers changes at regular intervals?

Is there a way to automatically change the color of my working traffic light in JavaScript on a timed basis, rather than relying solely on button clicks? Here is the current code I am using: <!DOCTYPE html> <html> <head> <style> # ...

javascripthtmlcss

Adjusting border width in Firefox with HTML buttons

Here is the HTML button I am working with: <input ID = "btnModel" value="Submit"> This is how it appears in Firefox: However, when I assign a border-width to it: input#btnModel{ border-width:2px; } it changes to this: 1- It does not revert ...

htmlcss

Activate the class using Vue with the v-for directive

I'm curious about the v-for functionality. Why is it necessary to use this.activeClass = {...this.activeClass} to update the component? I noticed that the component does not update after this line of code. if (this.activeClass[index]) { ...

javascriptvue.js

Scrolling seamlessly within a container that is fixed in position

For hours, I've been attempting to incorporate smooth scrolling into my project with no success. The issue lies in the container where the anchor tags are located. If it's set to fixed position or absolute, none of my attempts seem to work. In ...

javascriptjqueryhtmlcss

Executing JavaScript code within ASP.NET Visual Basic

My current web application uses jQuery and JavaScript, but I want to add more features that are supported in ASP.net VB. However, I am unsure if the JavaScript can run after the VB code. Essentially, I would like the web app to follow this sequence: ...

javascriptjqueryasp.netvb.nethtml

Responsive menu not collapsing properly and appearing funky in Drupal

I've managed to create a responsive navigation bar, but I'm encountering two issues. Firstly, when I resize the screen on my test pages, not all of the links hide as expected. Secondly, after inserting the code into Drupal, the nested links appea ...

javascripthtmlcssdrupal

Ways to conceal a text-filled div behind an image using 3D transformation

I've been working on creating three images with a fun 'flipcard' effect for the past day and a half, and I believe I'm getting closer to achieving my goal. However, there is one issue remaining, as you can see in the codepen. When the ...

htmlcsscss-transitions

Eliminate the empty choice for Angular when dealing with dynamic option objects

Looking for assistance with this code snippet: <select ng-model='item.data.choice' > <option ng-if='item.data.simple_allow_blank == false' ng-show='choice.name' ng-repeat='choice in item.data.simple_choices&ap ...

cssangularjshtml

Ways to adjust dimensions depending on zoom level or screen size

Here is the HTML code snippet: <div id="divMainFirst"> <div id="divInnerFirst"> <div id="divTitleHeaderUC"> <span id="spanTitleHeaderUC">Urgent Care Wait Time</span> </d ...

htmlcss

Is there a way to retrieve the ID by using the autocomplete feature to search for a user's first name and last name in PHP

Check out this code from index.php (all credit to the original owner): <HTML> <HEAD> <TITLE> Ajax php Auto Suggest </TITLE> <link href="css/style.css" rel="stylesheet" type="text/css"> <SCRIPT LANGUAGE="JavaScript ...

phpjquerycssajaxweb

How can I modify the Layout of my Quasar App to move the left Drawer to the right side?

I find myself struggling with the arrangement of Quasar and it's not quite clicking for me, even after going through the documentation. The scaffolder presented me with this code snippet. However, it positions the Drawer on the left side. Is there a ...

vue.jsquasar-frameworkquasar

Using jquery to refresh several backgrounds at once

While I have some knowledge of CSS and various JavaScript libraries, I've encountered difficulty in integrating multiple backgrounds into the code that I found on this link: http://codepen.io/quasimondo/pen/lDdrF. My goal was to overlay a transparent ...

jqueryhtmlcss

You are unable to extract data from an HTML table

I have been encountering an issue while trying to extract data from an HTML table. Every time I attempt to do so, I am faced with an ERROR Message 13 "Type Mismatch". I suspect that the problem lies in my use of incorrect HTML tags. Despite spending severa ...

htmlexcelvbaweb-scraping

Tips for creating a script that compiles all SCSS files into CSS within a Vue 3 project

Within my project, there exists a file named index.scss located in the src/assets/styles directory. Adjacent to this file are multiple folders housing SCSS files that are ultimately imported into index.scss. My objective is to devise a script within the pa ...

cssvue.jssass

The component cannot be created using shallowMount because vm.$refs['VTU_COMPONENT'] is not defined

Not sure if it's a bug or if I'm making a mistake. I attempted to use shallowMount to mount my main App component, but it doesn't seem to work. The error message I receive is: Cannot set properties of undefined (setting 'hasOwnProper ...

javascriptvue.jsjestjsvue-test-utils

Hovering Div Troubles

I've been working on creating a hover effect for the blocks on my website. Everything was going smoothly until I reached the last block. The hover effect appears to be displaced, as shown in this sample link. Although the CSS code I'm using seem ...

htmlcss

Troubleshooting issues with rowspan in a Datatable

I am currently utilizing jQuery DataTables to display my grid data and implementing the rowspan concept with the rowsGroup option. Initially, it works well by spanning some rows and looking visually pleasing, but eventually, it starts failing. Here are so ...

javascriptjqueryhtmldatatables

Sending Component Properties to Objects in Vue using TypeScript

Trying to assign props value as an index in a Vue component object, here is my code snippet: export default defineComponent({ props:{ pollId:{type: String} }, data(){ return{ poll: polls[this.pollId] } } }) Encountering errors wh ...

typescriptvue.js

Set the div to have a position of absolute, disregarding any other parent divs that may also have position absolute set

Is there a way to bring an outsider class <div> to the front of all others, even when all <div> elements are set as position: absolute;? How can the .free-object, which is inside .left, overlap both .left and .right? I have tried using z-ind ...

css

Tips for inserting a Vue.js variable into a window.open event

Within this snippet of code: <tr v-for="person, index in People" :key='index'> <td> <button type="button" onclick="window.open('/details/'+person.id,'_blank')"> details</butto ...

javascripthtmlvue.jsfrontend