Modifying .page-content background image

Question

How can I implement it so that I switch per-post background images from the WP post-edit screen?

A developer helped me built a custom WP theme, but can't help me out right now. On this page:

http://vernisaj.ro/guetlinvelo/a-la-carte/litespeed/

there is a background image on the following CSS element:

.page-content { background-image: url('http://www.....' }

However in the WordPress editor, I can't seem to find this picture (I looked in all php files and css files, it's in there).

Thanks for the help!

EDIT: With the WordPress Editor I mean the one you'll get through Appearance -> Editor.

Answer 1

WordPress does not have such an option by default; you will have to create the functionality for per-post background images - which is entirely possible.

Your best bet might be to use post custom meta to link/upload per-post background images, and then enqueue a dynamic stylesheet that applies that image as the background for the post, using the .postid-$id CSS class.

1. Create a custom post meta box
2. Add to the meta box a form field to allow the user to provide a URL to an image, or to upload an image
3. Enqueue a function that queries the post_custom_meta(), and applies the background style if the appropriate post custom meta data exist.

EDIT

If you just want to know where that background image CSS definition is being applied: it is being enqueued, as a callback function likely to the wp_head or wp_print_styles action hook. You'll need to look in functions.php for this callback function.

Answer 2

Well, the CSS is actually pointing to an image on a different site: velo-service.ch

It's not hard to have a featured image for each post/page go to the background of that. But the page template needs to be coded that way.

Here's the relevant CSS as it is now. .page-content { background: url("http://www.velo-service.ch/htdocs/modules/content/litespeed.jpg") no-repeat scroll 0 0 #FFFFFF; }

Answer 3

WordPress offers a simple solution for this question. If your theme is using the body_class.

How it works: In the header.php file you should have <?php body_class(); ?>> This will give each page a unique ID. You then need a tool like the Firefox plugin Web Developer or Firebug to inspect the ID for the given page.