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.

  • Yes - I would recommend the approach given in that discussion. What is needed is an additional piece of data unique to each page. Custom fields are perfectly suited for this. If you have trouble implementing that, post a new question with the specific problem you're having.
    – jdm2112
    Commented Dec 24, 2015 at 14:42
  • Possible duplicate of Create a full width responsive header image per page
    – jgraup
    Commented Dec 24, 2015 at 17:09

3 Answers 3


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; 

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:ACF Choose Location

  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


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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.