How to load background fade in css?

Question

Well, I have an html page with a background image, only when the page clicks, it appears in a weird way. Is there any way she could gently press the page? I am using a code that changes the image every time I load the page.

<script> 
var fundos = 20; 
ran = Math.round(Math.random() * (fundos-1))+1 
if (ran == (1)) { 
url_background=("img/1.png"); 
} 
if (ran == (2)) { 
url_background=("img/2.png") 
} 
if (ran == (3)) { 
url_background=("img/3.png"); 
} 
if (ran == (4)) { 
url_background=("img/4.png") 
} 
if (ran == (5)) { 
url_background=("img/5.png"); 
} 
if (ran == (6)) { 
url_background=("img/6.png") 
} 
if (ran == (7)) { 
url_background=("img/7.png"); 
} 
if (ran == (8)) { 
url_background=("img/8.png") 
}
if (ran == (9)) { 
url_background=("img/9.png"); 
} 
if (ran == (10)) { 
url_background=("img/10.png"); 
} 
if (ran == (11)) { 
url_background=("img/11.png") 
}
if (ran == (12)) { 
url_background=("img/12.png"); 
} 
if (ran == (13)) { 
url_background=("img/13.png") 
}
if (ran == (14)) { 
url_background=("img/14.png") 
}
if (ran == (15)) { 
url_background=("img/15.png"); 
} 
if (ran == (16)) { 
url_background=("img/16.png") 
}
if (ran == (17)) { 
url_background=("img/17.png"); 
} 
if (ran == (18)) { 
url_background=("img/18.png") 
}
if (ran == (19)) { 
url_background=("img/19.png"); 
} 
if (ran == (20)) { 
url_background=("img/20.png") 
}
</script>

Answer 1

To load the image and only show when already in memory:

var fundos = 20;
var ran = Math.round(Math.random() * (fundos - 1)) + 1
var url_background = "img/" + ran + ".png";

function carrega() {
    $('<img/>').attr('src', 'http://picture.de/image.png').load(function () {
        $(this).remove(); // para libertar memória e evitar fugas de memória
        $('body').css('background-image', 'url(' + url_background + ')');
    });
    $('.main').fadeIn('slow');
}

The idea is: create a new element that you will never use but with the address of the image you want. Using .load() you can know when the image is loaded and then you can apply that image to the body because it is already loaded in memory.

_source

To fade in the image you can do with CSS:

body {
    -webkit-transition: background-image 0.2s ease-in-out;
    -moz-transition: background-image 0.2s ease-in-out;
    -ms-transition: background-image 0.2s ease-in-out;
    -o-transition: background-image 0.2s ease-in-out;
    transition: background-image 0.2s ease-in-out;
}

That way when the jQuery apply $('body').css('background-image', 'url(http://picture.de/image.png)'); the background image will make a transition from 0.2 seconds.

Answer 2

Hello, you can set the background in an element outside the content, example:

<div class="meuBackground"><section><p>Seu conteudo aqui</p></section></div>

Define the layers in css:

div {
    z-index:0;
}

section { 
    z-index:1; 
}

And with javascript control the background and the appearance with opacity:

div {
  opactity:0;
}