How to delay background image on load

Question

I know how to delay an element on load, but I have a weird request from a client. They want the background image to load 5 seconds after the page loads. I'm new to js, thought I could do it easily, but it's not working out.

I've tried this:

$(document).ready(function() {
    $('#primary .bcg').css( "background", "url(folder/path", function(){
        $(this).delay(5000).fadeIn(400)
        });
});

and this:

$(document).ready(function() {
    $('#primary .bcg').delay(5000).fadeIn(400, function() {
           $('this').css( "background", "url(folder/path")
    });
});

Both to no avail. Is there a way to make this happen? Or rather a way for a novice to make it happen?

css:

#primary .bcg {
    background: none;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

}

Much thanks for any help!

you have #Primary and #primary. Make them the same case – Christina Sep 04 '14 at 06:56 — Christina, Sep 04 '14 at 06:56

Viswanath Donthi · Answer 1 · 2014-09-04T05:59:59.703

3

You can do it like this using setTimeout as"

$(document).ready(function(){
   setTimeout(function(){
       $('#Primary .bcg').css('background', 'url(folder/path)');
   }, 5000);    // Delay for 5 seconds
});

edited Sep 04 '14 at 05:59

answered Sep 04 '14 at 05:47

Viswanath Donthi

1,791
1
11
12

Thanks, not sure if I'm doing something wrong, but when I use the block of code above, the background image loads immediately. The CSS is changing from `background: none` to `background: url(folder/path)`, but there is no delay. – Eric Brockman Sep 05 '14 at 21:40

score 1 · Answer 2 · answered Sep 04 '14 at 06:04

1

$(document).ready(function(){
   setTimeout(function(){
       $('#Primary .bcg').css('background', 'url(folder/path)');
   }, 10000);    
});

You can use set time time out but you will not get the fadeIn effect with this . or you can

$(document).ready(function(){
  $('#Primary .bcg').fadeOut(function() {
     $('#Primary .bcg').css({background : url('folder/path') });
    $('#Primary .bcg').fadeIn(300);
  }, 300);
})

answered Sep 04 '14 at 06:04

Ashisha Nautiyal

1,389
2
19
39

Thanks, As for the first example; not sure if I'm doing something wrong, but when I use the block of code above, the background image loads immediately. The CSS is changing from background: none to background: url(folder/path), but there is no delay. As for the 2nd example; if I’m not mistaken, I would have to set the opacity of the element in CSS and that would make the whole element `#primary .bcg` fadeIn and fadeOut, not just the background image, correct? – Eric Brockman Sep 05 '14 at 21:49

How to delay background image on load

2 Answers2