Wordpress将图像添加为动态创建的部分的背景

I am building a Wordpress theme that displays all my pages as sections on one single page and the menu scrolls to each section. For each section I want the user to be able to add a background image or background colour, but with the ability for them all to be different. However, with the code I am using, when you change the background-image for one page section - it changes it for all of them.

Is there a way I can change this code below so that when a user selects a background image (featured image) for a specific page, it ONLY changes the respective section.

<?php $pages = get_pages(array('sort_column' => 'menu_order'));
foreach ($pages as $page_data) {
    $content = apply_filters('the_content', $page_data->post_content);
    $title = $page_data->post_title;
        $slug = $page_data->post_name;
    //get url of featured image
    $thumb_id = get_post_thumbnail_id();
    $thumb_url_array = wp_get_attachment_image_src($thumb_id, 'thumbnail-size', true);
    $thumb_url = $thumb_url_array[0];
    //check if page has featured image
    if ( has_post_thumbnail() ) {
    $featured_image = $thumb_url;
    }
    else {
$featured_image = '';
    }
    echo "<section id='$slug'  class='main fullscreen'>";
echo '<article class="main parallax" style="background:url(' . $featured_image . ') 50% 0 repeat fixed;">';
echo $content;
    echo '</article>';
echo "</section>";
}
?>

UPDATE Changed my thumbnail logic to the following:

<?php $pages = get_pages(array('sort_column' => 'menu_order'));

foreach ($pages as $page_data) { $content = apply_filters('the_content', $page_data->post_content); $title = $page_data->post_title; $slug = $page_data->post_name; //get url of featured image

$background_image = ''; $background_image_array = get_the_post_thumbnail($page_data->ID, 'full');

echo "<section id='" . $slug  . "'  class='main fullscreen'>";
echo '<article class="main parallax" style="background:url(' . $background_image . ') 50% 0 repeat fixed;">';
echo get_the_post_thumbnail($page_data->ID, 'thumbnail'); 
echo $content;
echo '</article>';
echo "</section>";
}
?>

This will display the unique featured image for each page as a thumbnail above each page (because of the line echo get_the_post_thumbnail($page_data->ID, 'thumbnail'); However, I can't get the url of the image from this code....any help on this?

Try out this

<?php $pages = get_pages(array('sort_column' => 'menu_order'));
foreach ($pages as $page_data) {
    $content = apply_filters('the_content', $page_data->post_content);
    $title = $page_data->post_title;
        $slug = $page_data->post_name;
    //get url of featured image


 $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );




    echo "<section id='$slug'  class='main fullscreen'>";
echo '<article class="main parallax" style="background:url(' . $image[0] . ') 50% 0 repeat fixed;">';
echo $content;
    echo '</article>';
echo "</section>";
}
?>

Here is my updated answer:

<?php 
if ( has_post_thumbnail()) {
  $image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full');
  echo $image_url[0]
}
?>

You can put this in your loop at the required spot instead of echoing it, of course.

Here is the source: http://codex.wordpress.org/Function_Reference/get_the_post_thumbnail (same as before)

And here is your code:

<?php $pages = get_pages(array('sort_column' => 'menu_order'));
foreach ($pages as $page_data) {    

  $featured_image_url = '';

  if ( has_post_thumbnail()) {
    $featured_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full');
  }

echo "<section id='" . $slug . "' class='main fullscreen'>";
echo '<article class="main parallax" style="background:url(' . $featured_image_url . ') 50% 0 repeat fixed;">';
echo $content;
echo '</article>';
echo "</section>";
}
?>

One side note:

echo "<section id='$slug'  class='main fullscreen'>";

...should use string concatenation as follows:

echo "<section id='" . $slug  . "'  class='main fullscreen'>";

Try out this

<?php $pages = get_pages(array('sort_column' => 'menu_order'));
foreach ($pages as $page_data) {
    $content = apply_filters('the_content', $page_data->post_content);
    $title = $page_data->post_title;
        $slug = $page_data->post_name;
    //get url of featured image
    $thumb_id = get_post_thumbnail_id($page_data->ID);  // update
    $thumb_url_array = wp_get_attachment_image_src($thumb_id, 'thumbnail-size', true);
    $thumb_url = $thumb_url_array[0];
    $thumb_id = get_post_thumbnail_id();
    if((isset($thumb_id) && $thumb_id != '')){
        $thumb_url_array = wp_get_attachment_image_src($thumb_id, 'thumbnail-size', true);
        $thumb_url = $thumb_url_array[0];
        echo "<section id='$slug'  class='main fullscreen'>";
                echo '<article class="main parallax" style="background:url(' . $thumb_url . ') 50% 0 repeat fixed;">';
            echo $content;
                echo '</article>';
          echo "</section>" ;  
     }
     else {
         echo "<section id='$slug'  class='main fullscreen'>";
                echo '<article class="main parallax" style="background:#fff;">';
            echo $content;
                echo '</article>';
          echo "</section>" ;
     }
}
?>

UPDATE Changed my thumbnail logic to the following:

$post_id = $page->ID;
$background_image = '';
$background_image = get_the_post_thumbnail($post_id, 'full');

Need to use $page_data->ID as the $page_id. Then add that into the following code:

$background_image = wp_get_attachment_image_src( get_post_thumbnail_id( $page_data->ID ), 'single-post-thumbnail' );

Works like a charm