how to make background fade with respect to current element css

Question

I have a loading icon, which is supposed load after clicking a button. I want all the background element of the icon fade, to create a pure loading feel. Whats the easiest way to do that?

EDIT: I all other elements to be fade, not just the background image.

$("#show").on("click",function(){
 $(".page-loader-indiv").show();
});
 $(".page-loader-indiv").hide();

.page-loader-indiv{
 position: fixed;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 100%;
 z-index: 99999;
 background: transparent url(http://web.codeevents.xyz/img/page-loader.gif) center center no-repeat;
}

body{
background:url(http://web.codeevents.xyz/img/Desserts.jpg);
color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
 This is some content
 This is more content
</div>
<div class = "page-loader-indiv">
</div>

<div>
Click here to show loader
<button id ="show" >Show Loader</button>
</div>

I don't think you can as it is part of the image. Unless you create the image with a transparent background — Simon, Jun 23 '17 at 02:03
Possible duplicate of [Fade background image in and out with jQuery?](https://stackoverflow.com/questions/5533171/fade-background-image-in-and-out-with-jquery) — KyleS, Jun 23 '17 at 02:07

Sakibur Rahman · Answer 1 · 2017-06-23T02:58:43.710

I have got it finally, just have set a background opacity to the loader icon.

$("#show").on("click",function(){
 $(".page-loader-indiv").fadeIn(3000).fadeOut(3000);
});
 $(".page-loader-indiv").hide();

.page-loader-indiv{
 position: fixed;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 100%;
 z-index: 99999;
 background:rgb(0,0,0,0.5) url(http://web.codeevents.xyz/img/page-loader.gif) center center no-repeat;
}

body{
background:url(http://web.codeevents.xyz/img/Desserts.jpg);
color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
 This is some content
 This is more content
</div>
<div class = "page-loader-indiv">
</div>

<div>
Click here to show loader
<button id ="show" >Show Loader</button>
</div>

how to make background fade with respect to current element css

1 Answers1