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:


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.

  • Your page gives me this... Parse error: syntax error, unexpected '{' in /home/kurator/public_html/guetlinvelo/wp-content/themes/guetlinvelo/page.php on line 3 – Rutwick Gangurde Nov 2 '11 at 15:17
  • sorry, I tried solving it (didn't work), it should work now. – ernesto50 Nov 2 '11 at 15:21
  • With "WP Editor" you mean the WordPress editor to change the content of a post/page or do you mean the editor to change template files (located in Appearance > Editor)? – Roman Nov 2 '11 at 15:24
  • Appearance > Editor! – ernesto50 Nov 2 '11 at 15:28

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.


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.

  • Well I only want the page background to be changed and since it's only a seasonal change (when new bikes come in once a year) the picture shouldn't be updated all the time. – ernesto50 Nov 2 '11 at 16:14
  • Okay, then can you clarify what you really want, because the CSS class you indicated is applied to the Page (i.e. Page post-type) content. If you simply want to be able to change it via CSS, then I don't really understand your question. – Chip Bennett Nov 2 '11 at 16:17
  • See updated answer. – Chip Bennett Nov 2 '11 at 16:22
  • Yes I just want it for the page. I think you edited my question (I never wrote per-post), that's why there is a miscommunication :) Neither wp_head nor wp_print_styles can be found in the functions.php file. – ernesto50 Nov 2 '11 at 16:59

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; }

  • Yeah, but where would I put it? Overwriting .page-content { } etc. through the style.css doesn't seem to work. – ernesto50 Nov 2 '11 at 16:03

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.

  • But I think he wants to be able to define the image to be used for a given post, from the post-edit screen for that post. – Chip Bennett Nov 2 '11 at 16:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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