Set fullscreen background in WordPress with an approprietly sized image. Work in progress from: http://stackoverflow.com/a/16454226/1469799

put-in-functions.php

/**
* Set the fullscreen background image using a smaller image for small (ie mobile screens)
* http://pippinsplugins.com/retrieve-attachment-id-from-image-url/
*/

//get id of attachment by full url
// http://pippinsplugins.com/retrieve-attachment-id-from-image-url/
function _sf_get_image_id($image_url) {
  global $wpdb;
	$prefix = $wpdb->prefix;
	$attachment = $wpdb->get_col($wpdb->prepare("SELECT ID FROM " . $prefix . "posts" . " WHERE guid='%s';", $image_url )); 
        return $attachment[0]; 
}

// add the script to check screen size and if the height is less then 480 set background image to mobile size.
function _sf_bg_img_size_decider() {
	wp_enqueue_script('bg-decider', get_template_directory_uri(). '/js/screensize.js', array( 'historyjs' ), false, true);
}
add_action('wp_enqueue_scripts', '_sf_bg_img_size_decider');

//Add 320x480 image size specifically for mobile background use.
add_image_size( 'mobile-bg', 320, 480 ); 

put-in-header.php

<!--Put this directly after opening body tag.-->
<!--Be sure to add a closing tag for this container before the closing body tag.-->
<?php
	// Set size of full screen background based on window 
	//get the url of the full-size fullscreen background image.
	$bg_full = get_theme_mod('body_bg_img');
	// get the url of background img
	$img_url = $bg_full;
	// store the image ID in a var
	$bg_img_id = _sf_get_image_id($img_url);
?>
<div id="bg"
    data-fullbg-src="<?php $image_attributes = wp_get_attachment_image_src( $bg_img_id, 'full' ); echo $image_attributes[0]; ?>"
    data-smallbg-src="<?php $image_attributes = wp_get_attachment_image_src( $bg_img_id, 'mobile-bg' ); echo $image_attributes[0];  ?>"
>

put-in-style.css

/* Fullscreen background method from an article by Chris Coyier from http://css-tricks.com/perfect-full-page-background-image/ */
/**I'M STILL PlAYING WITH THE CSS FOR THIS **/
#bg {
 -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}

screensize.js

//Thanks to Ben lee on Stackoverflow for this idea. http://stackoverflow.com/a/16454226/1469799
jQuery(document).ready(function($) {
    var key = ($(window).height() > 480 ? 'fullbg-src' : 'smallbg-src');
    var $content = $('#bg');
    $content.css('background-image', 'url(' + $content.data(key) + ')');
});