jquery - Changing background image one time on responsive background image

Question

The code I'm using is this one

background: url(bilder/cover.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

What I'd like to accomplish is that the background image is changed after like 2 sec to a background image that then stays put.

I know there are Jqueries for changing backgrounds like this but I'm not sure how to make something like that work with the code I'm using! It would be awesome if someone hade a solution to this!

My starting point for changing background was the code I found on w3schools:

{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}

Answer 1

EXAMPLE

HTML

<div id="myBackground"></div>

CSS

#myBackground {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;

    background: url(http://jsfiddle.net/img/initializing.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

JavaScript

var imgUrl = "url(http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-10/images/bg.png)";

$(function() {    //    starts when page is loaded and ready
    setTimeout(function() {
        $("#myBackground").css("background-image", imgUrl);
    }, 2000);    //    2 second timer
})

---

Alternate Style (with FadeIn/Out effect)

HTML

<div id="myBackground">
    <img src="http://jsfiddle.net/img/initializing.png" />
    <img src="http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-10/images/bg.png" />
</div>

CSS

#myBackground {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
}
#myBackground img {
    height: 100%;
    width: 100%;
}
#myBackground img:nth-child(2) {
    display: none;
}

JavaScript

$(function() {    //    starts when page is loaded and ready
    setTimeout(function() {
        $("#myBackground img:nth-child(1)").fadeOut("slow");
        $("#myBackground img:nth-child(2)").fadeIn(1500);
    }, 2000);    //    2 second timer
})