Showing background image only on first page

Question

Following hawaii's post

$(document).ready(function() {
  $("body").css("backgroundImage", "url(backgroundImageUrl)");
  $.ajax().done(function() {
    return $("body").css("backgroundImage", "");
  });
});

Edit

*EDIT: I add something which I hope helps a bit for clarification: my site (index.html), simplyfied, looks like this:
next
        <div id="content-main">
            <div id="othercontent"></div> //<== this is content from other html-file
        </div>
</body> The User clicks on the link, and then ,using jquery load(), some html-file content gets loaded into the div
(#content-main), and in the end everything only happens in this single index.html. So if I assign a background img to the body of the index.html (using jquery $('body').css...), I need to find a way to identify when other content exists in the DIV #content-main..*

hmm, this does not work. When I click on a link on my page, the DIV get's filled with new content, but as I'm still on the index.html, the body background does not change. – JWatan

.ready() appears fires "once". See http://api.jquery.com/ready/

At original post , 1st paragraph

ONLY on the initially loading page (i.e. in the body-tag), but as soon as some (other) content gets loaded into that "ajax" DIV, this background should disappear from index.html. – JWatan

body's css backgroundImage property should only be called "once". As described at 1st paragraph of question, the entire page does not appear to "reload", only a descendant of body element, that is, div.

An if statement is not necessarily needed to check the content of the dynamically populated div (descendant of body). It could be included, but is not necessary, needed to fulfill the requirement, of the body element's backgroundImage addition or removal.

The above piece should work to fulfill the original requirement, without including further tests

jsfiddle http://jsfiddle.net/guest271314/t6ZYf/

If requirement inlcudes other than loading backgroundImage once , please clarify ? Happy to help, if able

Note

The .done() http://api.jquery.com/deferred.done/ should be called after the completed $.ajax() request.

Edit (updated to reflect original question revisions https://stackoverflow.com/posts/22673564/revisions)

$(function () { /* `document` `ready` */
  $("body").css("backgroundImage", "url(backgroundImageUrl)"); /* set css`backgroundImage` property for `body` "once", at `document` `ready`, "initial page load", please see jquery `.ready()` api.jquery.com/ready */
//AJAX: load html-pages dynamically into this site's div (#content-main), and add browser history and URL support

    /*unnecessary? I don't use the next 3 lines of code
    //To override the default action for the link(anchor tag), use the following jQuery code snippet.
    $("a.ajaxLink").on('click', function (e) {
        //code for the link action
        return false;
    });
    */

    //Now to get the ajax content and display it and change the browser URL to the specific location without refresh use the following code.
    $("a.ajaxLink").on('click', function (e) {
        e.preventDefault();
        /*
        - if uncomment the ABOVE line, html5 nonsupported browers won't change the url but will display the ajax content;
        - if commented, html5 nonsupported browers will reload the page to the specified link.
        */

        //get the link location that was clicked
        pageurl = $(this).attr('href');

        //to get the ajax content and display in div #content-main
        $('#content-main').load(pageurl+'?rel=tab'+'#content-main', function() {
        return $("body").css("backgroundImage", ""); /* jquery `.load()` `complete` `callback`, remove `backgroundImage` from `body` */
        });

        //to change the browser URL to the given link location
        if(pageurl!=window.location){
            window.history.pushState({path:pageurl},'',pageurl);
        }
        //stop refreshing to the page given in
        return false;
    });

    //the below code is to override back button to get the ajax content without page reload
    //added some details from http://rosspenman.com/pushstate-jquery/ - otherwise going back in history to initial page resulted in issues
    $(window).on('popstate', function(e) {
        if (e.originalEvent.state !== null) {
            $('#content-main').load(location.pathname+'?rel=tab'+'#content-main', function() {
        return ($("body").css("backgroundImage") != "" ? $("body").css("backgroundImage", "") : null); /* jquery `.load()` `complete` `callback`, `if` `backgroundImage` not empty string, remove `backgroundImage`, `else` return `null` */
        })
        }
        else { /* not certain here, if needed to achieve requirement, Try place `load()` `callback` at `if` statement above at `load()` `callback` here, as well */
            $('body').load(location.pathname+'?rel=tab'+'#content-main');
        }
    });
});

Note see jquery .load() complete callback http://api.jquery.com/load/

Hope this helps