-<tr valign="top">
-<th scope="row"><?php _e( 'Position' ); ?></th>
-<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Position' ); ?></span></legend>
-<label>
-<input name="background-position-x" type="radio" value="left"<?php checked('left', get_theme_mod('background_position_x', 'left')); ?> />
-<?php _e('Left') ?>
-</label>
-<label>
-<input name="background-position-x" type="radio" value="center"<?php checked('center', get_theme_mod('background_position_x', 'left')); ?> />
-<?php _e('Center') ?>
-</label>
-<label>
-<input name="background-position-x" type="radio" value="right"<?php checked('right', get_theme_mod('background_position_x', 'left')); ?> />
-<?php _e('Right') ?>
-</label>
+<input name="background-preset" type="hidden" value="custom">
+
+<?php
+$background_position = sprintf(
+ '%s %s',
+ get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ),
+ get_theme_mod( 'background_position_y', get_theme_support( 'custom-background', 'default-position-y' ) )
+);
+
+$background_position_options = array(
+ array(
+ 'left top' => array( 'label' => __( 'Top Left' ), 'icon' => 'dashicons dashicons-arrow-left-alt' ),
+ 'center top' => array( 'label' => __( 'Top' ), 'icon' => 'dashicons dashicons-arrow-up-alt' ),
+ 'right top' => array( 'label' => __( 'Top Right' ), 'icon' => 'dashicons dashicons-arrow-right-alt' ),
+ ),
+ array(
+ 'left center' => array( 'label' => __( 'Left' ), 'icon' => 'dashicons dashicons-arrow-left-alt' ),
+ 'center center' => array( 'label' => __( 'Center' ), 'icon' => 'background-position-center-icon' ),
+ 'right center' => array( 'label' => __( 'Right' ), 'icon' => 'dashicons dashicons-arrow-right-alt' ),
+ ),
+ array(
+ 'left bottom' => array( 'label' => __( 'Bottom Left' ), 'icon' => 'dashicons dashicons-arrow-left-alt' ),
+ 'center bottom' => array( 'label' => __( 'Bottom' ), 'icon' => 'dashicons dashicons-arrow-down-alt' ),
+ 'right bottom' => array( 'label' => __( 'Bottom Right' ), 'icon' => 'dashicons dashicons-arrow-right-alt' ),
+ ),
+);
+?>
+<tr>
+<th scope="row"><?php _e( 'Image Position' ); ?></th>
+<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Image Position' ); ?></span></legend>
+<div class="background-position-control">
+<?php foreach ( $background_position_options as $group ) : ?>
+ <div class="button-group">
+ <?php foreach ( $group as $value => $input ) : ?>
+ <label>
+ <input class="screen-reader-text" name="background-position" type="radio" value="<?php echo esc_attr( $value ); ?>"<?php checked( $value, $background_position ); ?>>
+ <span class="button display-options position"><span class="<?php echo esc_attr( $input['icon'] ); ?>" aria-hidden="true"></span></span>
+ <span class="screen-reader-text"><?php echo $input['label']; ?></span>
+ </label>
+ <?php endforeach; ?>
+ </div>
+<?php endforeach; ?>
+</div>
+</fieldset></td>
+</tr>
+
+<tr>
+<th scope="row"><label for="background-size"><?php _e( 'Image Size' ); ?></label></th>
+<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Image Size' ); ?></span></legend>
+<select id="background-size" name="background-size">
+<option value="auto"<?php selected( 'auto', get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) ) ); ?>><?php _ex( 'Original', 'Original Size' ); ?></option>
+<option value="contain"<?php selected( 'contain', get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) ) ); ?>><?php _e( 'Fit to Screen' ); ?></option>
+<option value="cover"<?php selected( 'cover', get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) ) ); ?>><?php _e( 'Fill Screen' ); ?></option>
+</select>