Background full screen (back-stretch) images in Drupal 7

Jquery plugin install

First of all we will need to install backstrech js script. So download it from http://srobbin.com/jquery-plugins/backstretch/ or from the link bellow.

Then copy JQuery plugin to your theme directory
[project_root]/sites/all/themes/custom/[your_theme_name]/js

Then we have inform Drupal that we would like to include that file into HEAD section.
Just edit your template file (file that is inside your theme directory and has *.info extension)

Append this code to JavaScript files inclusion section
(I assume that js file has the same name as shown bellow)

scripts[] = js/jquery.backstretch.min.js

Now clear the cache and see if you new file is insluded in your source code.
If so we are ready to move to next step where we will create a content type for our background images and write preprocess function to tell JS script about random background image that we want to show.

Image style

Create a new image style with name "background_images" and add "resize" effect with width = 2155 and height = 1500 (you can change it later as you like).
Save it.

Content type

Create a new content type called "background".
Add new image field called field_bg_image.
Remove body as we don't need it.
Save it.

The view

We need to create a view that will output random image from created content type.
Create new view and name it "background_images" and set it up like at screenshot below.

When you are done, save it.

HTML template

Go to your html.tpl.php template file (if you don't have this file in your theme directory just copy it from [project_root]/modules/system) and put that line bellow <?php print $scripts; ?> line (line 59)

<script type="text/javascript">
$.backstretch("<?php print $backstretch_image; ?>", {speed: 0});
</script>

This code will get $backstretch_image variable passed on by our proprocess function that we are going to create in next step and display our background image.

Preprocess function

Go to your template.php file (you can find it in your theme directory).

Append following code to your template.php file

function THEME_preprocess_html(&$variables) {     
	// get random image
	$view = views_get_view_result('background_images');    
	$node = node_load($view[0]->nid);       
	$image = field_get_items('node', $node, 'field_bg_image' );       
	$url = image_style_path('background_images', $image[0]['uri']);
	$variables['backstretch_image'] = file_create_url($url);
}

Remember to replace THEME with your current theme you are using.

Almost there

Add few new images by adding new content in Drupal administration.
Go to home and you should see background images.