How to add background image control to page admin controls?

Question

I understand that each page is assigned its own class such as .page-id-22 & I can use that to assign a background image to it using the stylesheet but I've seen a theme that adds a control to the admin section of the page itself, which is what I'd like to accomplish.

Basically, the user would be able to click & upload an image to an individual page, as needed, without the need to edit the stylesheet.

Would it be similar to some ideas posited in this dated discussion?

This question is different from this discussion because it's not just the header & this is something that needs to be part of the theme which doesn't make use of a plugin.

Answer 1

It can be done with a custom field and the CSS should be changed to .php file:

$image = get_post_meta( $post->ID, "ImagePathFromCustomField", true );
if ( $image != '' ) { 
    ?>
    <style type="text/css">
        .bg-image { 
            background-image: url(<?php echo $image; ?>); 
            background-repeat: repeat; 
        }
    </style>
    <?php
}

Answer 2

The easiest way would be to use custom fields, lets say ACF (Advanced Custom Fields) *even free version from WordPress.org

1. Lets say we are using ACF, you need to Create field group: Follow this Link, and go to Custom Fields > Add New

2. Fields, Create field, Add Field Label and Field Name (YOUR_FIELD_NAME) after that select Field Type: Image (when you select this type of field, you will get option to display it as URL

3. Select location (Page or Posts) - where to show that Field you created:

4. Now we have Image Field button on every page in backend lets jump to frontend display

5. Decide where you want to display that image (code), it can be page.php,footer.php,header.php (or anything you need), open that file and you need to paste <img src="<?php the_field('YOUR_FIELD_NAME'); ?>" /> there.

6. More advanced things are, you can use if/else to display image and jquery for that background, <?php if( get_field('YOUR_FIELD_NAME') ): ?> <img src="<?php the_field('YOUR_FIELD_NAME'); ?>" /> <script>Your Script here</script>
<?php endif; ?>

7. Best way would be to insert your script file in footer, so it loads after jQuery and other parts and only when there is image the same code as 6 but containing only script code..

INFO: section 3 will give you backend option to show Image Field when you create new or edit old Page

Answer 3

Check out the Custom CSS Per Post Plugin on GitHub to see how to use a meta box with the customizer. There is also a Gist: Custom CSS in WordPress, editable in the Customizer where you could just replace the CSS portion with a WP_Customize_Image_Control.