Title: Set post background using custom field
Last modified: August 21, 2016

---

# Set post background using custom field

 *  Resolved [telkins](https://wordpress.org/support/users/telkins/)
 * (@telkins)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/set-post-background-using-custom-field/)
 * Hello. I am wondering if it’s possible to set the background of a div (containing
   the shortcode) using the background-image custom field in the post being shown
   using the shortcode. Is this possible?
 * [http://wordpress.org/plugins/custom-content-shortcode/](http://wordpress.org/plugins/custom-content-shortcode/)

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Plugin Author [Eliot Akira](https://wordpress.org/support/users/miyarakira/)
 * (@miyarakira)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/set-post-background-using-custom-field/#post-4536062)
 * OK, I tried it and I needed to add a couple of parameters. Please see update 
   to version 0.6.0.
 * This is what I did to set a background image according to a custom field:
 * `<div style="background:url('[content name="post-name" image="image_field" return
   ="url"]') no-repeat;height:400px;width:300px;">`
 * Looks a bit wild, but it works. Here are the parameters:
 * _image_ – name of image field
    _return_ – set to _url_
 * Depending on how you set up the image field, you might need to add this parameter:
 * _in_ – set to _id, url _or_ object_; the image field content is ID, URL or image
   object; default is ID
 * It should work in a loop also.
 *  Thread Starter [telkins](https://wordpress.org/support/users/telkins/)
 * (@telkins)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/set-post-background-using-custom-field/#post-4536119)
 * Hmmm…. I feel like I’m close but I can’t quite get it to work. What am I doing
   wrong?
 * Here is where I’m at so far:
    <div style=”background:url(<?php echo do_shortcode(‘[
   loop type=”what_is_this”][content field=”background-image” return=”url”][/loop]’);?
   >) no-repeat; height:400px;width:300px; border:5px solid #fff;”>content goes 
   here with the custom field background image as div background</div>
 * I have the background-image custom field set with [http://charleybiggs.com.s64567.gridserver.com/wp-content/uploads/2014/01/featured_product_03.jpg](http://charleybiggs.com.s64567.gridserver.com/wp-content/uploads/2014/01/featured_product_03.jpg)
   as the background image (just for the purposes of testing this)
 * If you take a look at my dev site below, scroll down to the bottom and you will
   see the div that I’m testing this out on. Thanks for your help, you rock!
 * [http://charleybiggs.com.s64567.gridserver.com](http://charleybiggs.com.s64567.gridserver.com)
 *  Thread Starter [telkins](https://wordpress.org/support/users/telkins/)
 * (@telkins)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/set-post-background-using-custom-field/#post-4536120)
 * Nevermind, it started working. Thanks so much for your help!
 *  Plugin Author [Eliot Akira](https://wordpress.org/support/users/miyarakira/)
 * (@miyarakira)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/set-post-background-using-custom-field/#post-4536123)
 * Ah great! I’m glad it worked – I never thought of doing something like this, 
   but that’s cool that it’s possible. 🙂
 * Looking over your code, here’s how I might do it:
 *     ```
       <?php echo do_shortcode('
           [loop type="what_is_this"]
               <div style="background:url([content field="background-image" return="url"]) no-repeat; height:400px;width:300px; border:5px solid #fff;">
                   content goes here with the custom field background image as div background
               </div>
           [/loop]
           ');
       ?>
       ```
   
 * This will create as many boxes with different backgrounds as there are posts 
   found.
 *  Thread Starter [telkins](https://wordpress.org/support/users/telkins/)
 * (@telkins)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/set-post-background-using-custom-field/#post-4536269)
 * Hello. I just noticed that for some reason, the backgrounds won’t show up on 
   iphone/ipad. Any idea why this is happening? Everything else seems to work fine,
   but on those devices the background disappears in the div.
 * If you look at the block that says “Can you guess what this is?” then you will
   see that the background for that div doesn’t show up on iphone/ipad. Thanks for
   any help you can give me.
 * [http://charleybiggs.com.s64567.gridserver.com/](http://charleybiggs.com.s64567.gridserver.com/)

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Set post background using custom field’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/custom-content-shortcode_766976.svg)
 * [Custom Content Shortcode](https://wordpress.org/plugins/custom-content-shortcode/)
 * [Support Threads](https://wordpress.org/support/plugin/custom-content-shortcode/)
 * [Active Topics](https://wordpress.org/support/plugin/custom-content-shortcode/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/custom-content-shortcode/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/custom-content-shortcode/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [custom field](https://wordpress.org/support/topic-tag/custom-field/)
 * [php](https://wordpress.org/support/topic-tag/php/)

 * 5 replies
 * 2 participants
 * Last reply from: [telkins](https://wordpress.org/support/users/telkins/)
 * Last activity: [12 years, 2 months ago](https://wordpress.org/support/topic/set-post-background-using-custom-field/#post-4536269)
 * Status: resolved