How can I use custom properties to set different background on different pages?

Question

You get custom field values with get_post_meta().

WordPress has a function called wp_localize_script() that’s used to, as the name suggests, localized scripts by creating a javascript object from a PHP array. When you use wp_enqueue_script() to add a script to the front end of wordpress, you can “localize” it by calling wp_localize_script() afterwards. If you need to get values from custom fields or some other place from the database into some sort of javascript object, this is probably the easiest way to do it. Not exactly what wp_localize_script was designed for, but it will get the job done.

Here’s an example:

add_action( 'wp_print_scripts', 'wpse23525_add_scripts' );
function wpse23525_add_scripts()
{

    // Only for single posts
    if( !is_single() ) return;

    wp_enqueue_script( 'wpse23525_script', 'path/to/script.js', array( 'jquery' ) );

    // We should have $post by now, but get it if not
    global $post;
    if( empty( $post ) ) $post = get_queried_object();

    $localize = array( 
        'some_key'      => get_post_meta( $post->ID, 'some_key', true ),
        'another_key'   => get_post_meta( $post->ID, 'another_key', true ),
        'one_more'      => get_post_meta( $post->ID, 'one_more', true )
    );

    wp_localize_script( 'wpse23525_script', 'wpse23525_obj', $localize );
}

Which spits out this on the front end (values may change, of course):

<script type="text/javascript"> 
/* <![CDATA[ */
var wpse23525_obj = {
    some_key: "test1",
    another_key: "test2",
    one_more: "test3"
};
/* ]]> */
</script> 
<script type="text/javascript" src="http://localhost:8888/wp3.2path/to/script.js?ver=3.2.1"></script>

script.js would contain all the things you’re planning on doing with the data, which can be accessed with wpse23525_obj.some_key or wpse23525_obj.another_key etc.

So this:

var imageToBeLoaded = "images/bg_index.jpg";
$(document).ready( function () {
if(window.screen.width > 1024) {
  imageToBeLoaded = "images/bg_index_large.jpg";
}});

becomes

var imageToBeLoaded = wpse23525_obj.another_key;
$(document).ready( function () {
if(window.screen.width > 1024) {
  imageToBeLoaded = wpse23525_obj.some_key;
}});