Hide div except image with jquery

0

I have the following DIV:

 <div id="overlays" style="background-image: url(http://agar.io/img/background.png); position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 200; margin-top: -20px">

When playing the div disappears and when losing it reappears

function hideESCOverlay() {
        escOverlay = false;
        wjQuery("#overlays").hide();
    }

    function showESCOverlay(arg) {
        escOverlay = true;
        userNickName = null;
        wjQuery("#overlays").fadeIn(350);
    }

My problem is that I want to play once once overlays disappears, the overlay image disappears forever but the overlays do not disappear.

I'm going to play and the overlay disappears and I lose and reappears the overlay without its background image

    
asked by Eduardo Campos 12.02.2017 в 18:50
source

1 answer

1

What you need to do is change the CSS attribute image-background to none :

function hideESCOverlay() {
  escOverlay = false;
  $("#overlays").hide();
}
function showESCOverlay(arg) {
  escOverlay = true;
  userNickName = null;
  $("#overlays").css('background-image', 'none');
  $("#overlays").fadeIn(350);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="overlays" style="background-image: url(http://agar.io/img/background.png);">Hola</div>

<button onclick="hideESCOverlay()">Ocultar</button>
<button onclick="showESCOverlay()">Mostrar</button>
    
answered by 12.02.2017 / 19:07
source