CODEWITHSUNDEEP
javascriptjquerycss
mattvent
mattvent

Reputation: 381

CSS Fade in background image when loaded

my page has a default background color and a background image.

I want the default background color to display until the image if fully loaded. Only when the image is loaded, it can fade in.

So far, I have been able to fade in the background image nicely, but the image fades in even if not completely loaded.

I want to achieve something similar to WeTransfer

Here is my code :

HTML

<div id="container-background">

<div id="child-background">

  <p>Text</p>

</div> <!--container-background-->

</div> <!-- child-background-->

CSS

#container-background
{
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
}

#child-background
{
  background: #17181a;
  transition: background 0.7s linear;
  -webkit-transition: background 0.7s linear;
  height: 100%;
  width: 100%;
  background-image: url(https://c1.staticflickr.com/4/3804/11129952164_63075cdbe9_b.jpg);"
}

JS

$('#child-background').css('background', 'rgba(255, 255, 255, 0)');

Fiddle

Please help me fade in the background image only when it's loaded, and when not loaded yet, display the default background color.

Upvotes: 1

Views: 1437

Answers (2)

ankita patel
ankita patel

Reputation: 4251

Try this.

$(function(){
    var bgimage = new Image();      
    bgimage.src="https://www.switchbacktravel.com/sites/default/files/images/articles/Hiking%20photo.jpg";       
    $("#child-background").hide();     
    $(bgimage).load(function(){
        $("#child-background").css("background-image","url("+$(this).attr("src")+")").fadeIn(2000); 
     }); 
});
body{
  margin:0;
}
#container-background
{  
  height: 100vh;
  width: 100%;
  background:#000;
}
#child-background
{
  background-color: #17181a;
  background-repeat:no-repeat;
  background-size:cover;
  transition: background 0.7s linear;
  -webkit-transition: background 0.7s linear;
  height: 100vh;
  width: 100%; 
  
}
p{
  margin:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container-background">
  <div id="child-background">  
  <p>Text</p> 
</div> <!--container-background-->
</div> <!-- child-background-->

Upvotes: 1

Rahele Dadmand
Rahele Dadmand

Reputation: 573

remove background image from css and try this : 

$('<img/>').attr('src', 'https://c1.staticflickr.com/4/3804/11129952164_63075cdbe9_b.jpg').load(function() {
     $('#child-background').css('background-image','url(https://c1.staticflickr.com/4/3804/11129952164_63075cdbe9_b.jpg)');
    });
#container-background
{
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
}

#child-background
{
  background: #17181a;
  transition: background 0.7s linear;
  -webkit-transition: background 0.7s linear;
  height: 100%;
  width: 100%;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container-background">

<div id="child-background">

  <p>Text</p>

</div> <!--container-background-->

</div> <!-- child-background-->

Upvotes: 2

Related Questions