CODEWITHSUNDEEP
htmlwordpressanimationgifanimated-gif
Fewture
Fewture

Reputation: 137

Non-transparent GIF turns transparent

So most of the times, people ask how to turn their GIF background transparent. My goal is the opposite.

I have a GIF with a white background, which I want to display as a loading animation while firing AJAX calls. Unfortunately, the background turns transparent, and I do not know why.

Does anyone have an Idea? The GIF was exported with Photoshop, and is saved without transparency.

This is how I inserted the Loader.

.blockUI.blockOverlay:before,
    .loader:before {
        height: 20em;
        width: 20em;
        position: fixed;
        top: 20%;
        left:50%;
        margin-left: -10em;
        margin-right: -10em;
        display: block;
        content: "";
        -webkit-animation: none;
        -moz-animation: none;
        animation: none;
        background-image:url('<?php echo get_stylesheet_directory_uri() . "/images/caglayan-spinner2.gif"; ?>') !important;
        background-position: center center;
        background-size: cover;
        line-height: 1;
        text-align: center;
        font-size: 2em;
    }

Below you find 2 screenshots. First is the original GIF. Second one is the GIF on the webpage.

enter image description here enter image description here

Upvotes: 0

Views: 334

Answers (1)

Fenton
Fenton

Reputation: 250972

The GIF file itself is not the issue. It has a white background on the area in question:

Demonstration that background doesn't bleed through image

I believe the image of the refridgerator unit is transparent - and it is on top of the loading animation.

This is because of stacking context and z-index.

If you put the animation on top, it will fix this issue.

Upvotes: 1

Related Questions