Replaceable Image Theme Settings

page.tpl.php

<?php
/**************
 * IMPORTANT:
 * Place these styles in your page.tpl.php file to override the style.css.
 * You will need to make sure they match your themes selectors.
 **************/
?>
<style type="text/css" media="all">
  #page{
    background-attachment:<?php print $background_image_attachment; ?>;
    background-image:url("<?php print $background_image ?>");
    background-position:<?php print $background_image_position; ?>;
    background-repeat:<?php print $background_image_repeat; ?>;
  }
</style>

<?php
/**************
 * Place this image where ever your theme needs it. You can change it up, add more or remove this entirely.
 **************/
?>
<div id="header-image">
  <img alt="Header Image" height="100" width="150" src="<?php print $header_image; ?>" />
</div>

template.php

<?php

/**************
 * IMPORTANT:
 * Replace YOUR_THEME_NAME with the name of your theme through-out these snippets.
 **************/

function YOUR_THEME_NAME_process_page(&$variables) {
  $theme = 'YOUR_THEME_NAME';
  // Background Image
  // You must change the default background image to reflect the proper path in your theme folder.
  $default_background_image = drupal_get_path('theme', $theme) . '/background_image.jpg';
  // Theme Settings
  $background_image = theme_get_setting('background_image', $theme);
  $variables['background_image'] = file_create_url(!empty($background_image) ? $background_image : $default_background_image);
  $background_attachment = theme_get_setting('background_image_attachment', $theme);
  $variables['background_image_attachment'] = !empty($background_attachment) ? 'fixed' : 'scroll';
  $background_position = theme_get_setting('background_image_position', $theme);
  $variables['background_image_position'] = !empty($background_position) ? $background_position : 'top left';
  $background_repeat = theme_get_setting('background_image_repeat', $theme);
  $variables['background_image_repeat'] = !empty($background_repeat) ? $background_repeat : 'repeat';
  // Header Image
  // You must change the default header image to reflect the proper path in your theme folder.
  $default_header_image = drupal_get_path('theme', $theme) . '/background_image.jpg';
  // Theme Settings
  $header_image = theme_get_setting('header_image', $theme);
  $variables['header_image'] = file_create_url(!empty($header_image) ? $header_image : $default_header_image);
}

theme-settings.css

#theme-images .image_preview {
  float: right;
}

#theme-images .form-type-file {
  display: none;
}

#theme-images .form-submit {
  font-size: 0.75em;
  margin: 0;
  padding: 2px 10px;
}

theme-settings.js

(function ($) {
  Drupal.behaviors.themeSettings = {
    attach: function() {
      var fieldset = $('#theme-images');
      if (fieldset.length) {
        var images = $('.form-type-textfield', fieldset);
        if (images.length) {
          images.each(function(){
            var image = $(this);
            $('.form-submit', image).each(function(){
              var upload = $(this);
              upload.click(function(){
                upload.hide();
                image.next('.form-type-file').slideDown();
                return false;
              })
            });
          })
        }
      }
    }
  }
})(jQuery);

theme-settings.php

<?php

/**************
 * IMPORTANT:
 * Replace YOUR_THEME_NAME with the name of your theme through-out these snippets.
 **************/

function YOUR_THEME_NAME_form_system_theme_settings_alter(&$form, &$form_state) {
  $theme = "YOUR_THEME_NAME";
  drupal_add_css(drupal_get_path('theme', $theme) . '/theme-settings.css', array('group' => CSS_DEFAULT, 'every_page' => TRUE));  
  drupal_add_js(drupal_get_path('theme', $theme) . '/theme-settings.js', array('group' => JS_THEME, 'every_page' => TRUE));  
  $form['theme_images'] = array(
    '#type' => 'fieldset',
    '#attributes' => array('id' => 'theme-images'),
    '#title' => 'Theme image settings',
    '#collapsible' => TRUE,
    '#collapsed' => FALSE,
    '#weight' => -2,
  );
  // Background Image
  $background_image = theme_get_setting('background_image', $theme);
  // You must change the default background image to reflect the proper path in your theme folder.
  $default_background_image = drupal_get_path('theme', $theme) . '/background_image.jpg';
  $form['theme_images']['background_image'] = array(
    '#type' => 'textfield',
    '#title' => t('Path to background image'),
    '#default_value' => file_uri_scheme($background_image) == 'public' ? file_uri_target($background_image) : $background_image,
    '#field_suffix' => '<input type="button" class="form-submit" value="Upload Image" />',
    '#prefix' => '<img class="form-item image_preview" src="' . (!empty($background_image) ? file_create_url($background_image) : file_create_url($default_background_image)) . '" height="50" />',
    '#description' => t('The path to the file you would like to use as your background image.'),
  );
  $form['theme_images']['background_image_upload'] = array(
    '#type' => 'file',
    '#title' => t('Upload background image'),
    '#size' => 40,
    '#description' => t("If you don't have direct file access to the server, use this field to upload your background."),
  );
  $form['theme_images']['background_settings'] = array(
    '#type' => 'fieldset',
    '#title' => 'Advanced background settings',
    '#collapsible' => TRUE,
    '#collapsed' => TRUE,
  );
  $background_position = theme_get_setting('background_image_position', $theme);
  $form['theme_images']['background_settings']['background_image_position'] = array(
    '#type' => 'select',
    '#title' => t('Background image position'),
    '#options' => array(
      'bottom center' => t('Bottom Center'),
      'bottom left' => t('Bottom Left'),
      'bottom right' => t('Bottom Right'),
      'center center' => t('Center Center'),
      'center left' => t('Center Left'),
      'center right' => t('Center Right'),
      'top center' => t('Top Center'),
      'top left' => t('Top Left'),
      'top right' => t('Top Right'),
    ),
    '#default_value' => !empty($background_position) ? $background_position : 'top left',
    '#description' => t('Set the position of your background image. Vertical alignment and horizontal alignment.'),
  );
  $background_repeat = theme_get_setting('background_image_repeat', $theme);
  $form['theme_images']['background_settings']['background_image_repeat'] = array(
    '#type' => 'select',
    '#title' => t('Background image repeat'),
    '#options' => array(
      'repeat-x' => t('Repeat Horizontally'),
      'repeat-y' => t('Repeat Vertically'),
      'repeat' => t('Repeat Both'),
      'no-repeat' => t('No Repeat'),
    ),
    '#default_value' => !empty($background_repeat) ? $background_repeat : 'repeat',
    '#description' => t('Set the repeat of your background image. This will determine how your image tiles.'),
  );
  $background_attachment = theme_get_setting('background_image_attachment', $theme);
  $form['theme_images']['background_settings']['background_image_attachment'] = array(
    '#type' => 'checkbox',
    '#title' => 'Fixed Attachment',
    '#description' => 'If enabled, your background will stay fixed on the page and not scroll with the content.',
    '#default_value' => !empty($background_attachment) ? $background_attachment : 0,
    
  );
  // Header Image
  $header_image = theme_get_setting('header_image', $theme);
  // You must change the default header image to reflect the proper path in your theme folder.
  $default_header_image = drupal_get_path('theme', $theme) . '/background_image.jpg';
  
  $form['theme_images']['header_image'] = array(
    '#type' => 'textfield',
    '#title' => t('Path to header image'),
    '#default_value' => file_uri_scheme($header_image) == 'public' ? file_uri_target($header_image) : $header_image,
    '#field_suffix' => '<input type="button" class="form-submit" value="Upload Image" />',
    '#prefix' => '<img class="form-item image_preview" src="' . (!empty($header_image) ? file_create_url($header_image) : file_create_url($default_header_image)) . '" height="50" />',
    '#description' => t('The path to the file you would like to use as your header image.'),
  );
  $form['theme_images']['header_image_upload'] = array(
    '#type' => 'file',
    '#title' => t('Upload header image'),
    '#size' => 40,
    '#description' => t("If you don't have direct file access to the server, use this field to upload your image."),
  );
  // Prepend the theme settings submit handle so it runs before Drupal's submit handler.
  $submit = array($theme . '_settings_submit');
  if (isset($form['#submit'])) {
    if (is_array($form['#submit'])) {
      $form['#submit'] = array_merge($submit, $form['#submit']);
    }
    else {
      $form['#submit'] = array_merge($submit, array($form['#submit']));
    }
  }
  else {
    $form['#submit'] = $submit;
  }
}

function YOUR_THEME_NAME_settings_submit($form, &$form_state) {
  $theme = 'YOUR_THEME_NAME';
  $settings = array();
  // Background Image
  if ($file = file_save_upload('background_image_upload')) {
    $parts = pathinfo($file->filename);
    $destination = 'public://' . $parts['basename'];
    $file->status = FILE_STATUS_PERMANENT;
     if (file_copy($file, $destination, FILE_EXISTS_REPLACE)) {
        $_POST['background_image'] = $form_state['values']['background_image'] = $destination;
        unset($_POST['background_image_upload']);
        unset($form_state['values']['background_image_upload']);
     }
  }
  if (!empty($form_state['values']['background_image']) && !file_uri_scheme($form_state['values']['background_image'])) {
    $_POST['background_image'] = $form_state['values']['background_image'] = 'public://' . $form_state['values']['background_image'];
  }
  // Header Image
  if ($file = file_save_upload('header_image_upload')) {
    $parts = pathinfo($file->filename);
    $destination = 'public://' . $parts['basename'];
    $file->status = FILE_STATUS_PERMANENT;
     if (file_copy($file, $destination, FILE_EXISTS_REPLACE)) {
        $_POST['header_image'] = $form_state['values']['header_image'] = $destination;
        unset($_POST['header_image_upload']);
        unset($form_state['values']['header_image_upload']);
     }
  }
  if (!empty($form_state['values']['header_image']) && !file_uri_scheme($form_state['values']['header_image'])) {
    $_POST['header_image'] = $form_state['values']['header_image'] = 'public://' . $form_state['values']['header_image'];
  }
}