Display background color or image with custom meta box?

Question

With custom meta boxes, how would I go about displaying the background image (or color if no image is linked) within the page.

Code for the page where I want data to displayed. I want to apply the background color/image to section id="masthead".

<?php if (get_post_meta($post->ID, '_sqcmb_masthead_select', true)) { ?>

</div><!--end #container .row (from header)-->
    <section id="masthead">
        <div class="row">
            <div class="large-9 large-centered columns">
                <?php
                    $content = get_post_meta( $post->ID, '_sqcmb_masthead_content', true );
                    echo do_shortcode( $content );
                ?>
            </div><!-- .large- centered columns -->
        </div><!-- .row -->
    </section><!-- #masthead -->

<!--restart #container .row (from header)--><div id="content" class="row">

<? } else { ?>
<?php } ?>

Code for the custom meta boxes.

/*Metaboxes for masthead section */
$meta_boxes[] = array(
    'id'         => 'masthead-options',
    'title'      => 'Masthead Options',
    'pages'      => array( 'page' ), // Show on Pages
    'context'    => 'normal',
    'priority'   => 'high',
    'show_names' => true, // Show field names on the left
    'fields'     => array(
        array(
            'name'    => 'Display Masthead',
            'desc'    => 'Check this box id you want to display the Masthead Section.',
            'id'      => $prefix . 'masthead_select',
            'type'    => 'checkbox',
            ),
        array(
            'name'    => 'Masthead Content',
            'desc'    => 'Enter the content of the masthead section here. You can insert media, shortcodes, etc.',
            'id'      => $prefix . 'masthead_content',
            'type'    => 'wysiwyg',
            'options' => array( 'textarea_rows' => 5, ),
        ),
        array(
            'name' => 'Background Color',
            'desc' => 'Choose a background color.',
            'id'   => $prefix . 'masthead_bg_color',
            'type' => 'colorpicker',
            'std'  => '#ffffff'
        ),
        array(
            'name' => 'Background Image',
            'desc' => 'Upload an image as the background. This will override the Background Color. (optional)',
            'id'   => $prefix . 'masthead_bg_image',
            'type' => 'file',
        ),
    ),
);

Answer 1

You need to extract the value of the custom metabox (be this background color or background image) and then, once you validate to make sure it has a value, which one is empty or what happens if both have values, to determine an INLINE-STYLING on the following piece of code:

 <section id="masthead" style="background-image:<your dynamic value here>">

Just make sure you validate the scenarios of what if they fill a color but no image, what if they fill an image but no color, what if they fill both (on the metabox), what if they place none, etc.

Answer 2

Here is the final code I've got. I am really new to php, so it may be completely botched, but it is working.

<?php if (get_post_meta($post->ID, '_sqcmb_masthead_select', true)) { ?>

    <section id="masthead" style="background:
        <?php if 
                (get_post_meta($post->ID, '_sqcmb_masthead_bg_image', true )) {
                    echo "url('";
                    echo $content = get_post_meta( $post->ID, '_sqcmb_masthead_bg_image', true );
                    echo "')no-repeat center;
                            background-size:cover;
                            -webkit-background-size: cover;
                            -moz-background-size: cover;
                            -o-background-size: cover;";    }
                else {
                    echo $content = get_post_meta( $post->ID, '_sqcmb_masthead_bg_color', true );
                    echo ";"; }
        ?>" >

        <div class="row">
            <div class="large-12 columns">
                <?php
                    // Get the field
                    $content = get_post_meta( $post->ID, '_sqcmb_masthead_content', true );
                    // Filter it for shortcodes
                    echo do_shortcode( $content );
                ?>
            </div><!-- .large-12 columns -->
        </div><!-- .row -->
    </section><!-- #masthead -->


<? } else { ?>
<!-- Do Nothing. -->
 <?php }?>