fade div background on load

Question

I'm working on fading div background on load, I found that example: jsfiddle The only problem if hides whole DIV and fade it, but I need to faded only DIV background. So DIV with its text or some html inside will be shown from the beginning and its background would be fading on load.

<div style="border: 1px solid #000000;">
<div class="feature">some text and info here</div></div>

Answer 1

Absolutely position the text over top of the image, the fade affects the entire thing because your text is inside the div you're fading.

Fiddle example: https://jsfiddle.net/ubgyw1gt/3/

HTML

<div class="container">
  <div class="bgImageContainer"></div>
  <div class="feature"><span>Some text and stuff here</span></div>
</div>

CSS

.feature {
   width:100%;
   background:#fff;
   z-index:100;
   position: relative;
   top: 50%;
   transform: translateY(-50%);
 }
 .container {
   height: 400px;
   width: 100%;
 }
 .bgImageContainer {
   display: none;
   background-color: white;
   background-image: url("https://placeimg.com/760/460/tech");
   background-size: cover;
   height:400px;
   width: 100%;
   z-index:0;
   position: absolute;
 }

JS

$(document).ready(function(){
    $(".bgImageContainer").fadeIn('slow');
})