How to load background with fade effect in css?

Question

How to load background with fade effect in css?

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

Well, I have an html page with a background image, but when the page loads, it appears in a weird way. Can you load it gently on the page? I am using a code that changes the image every reload of 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>

javascript css

asked by anonymous 26.11.2014 / 15:22

2 answers

0

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

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

Set the layers in css:

div {
    z-index:0;
}

section { 
    z-index:1; 
}

And with javascript control the background and appearance with opacity:

div {
  opactity:0;
}

26.11.2014 / 16:36

Get string table MySQL query result different localhost and output

score 1 · Accepted Answer

To load the image and only show when it is 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 will never use but with the address of the image you want. Using .load() can tell when the image is loaded and then you can apply that image to body because it is already loaded into memory.

font

To make a fade in the image 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;
}

This way when jQuery applies% of the background image will make a transition of $('body').css('background-image', 'url(http://picture.de/image.png)'); seconds.