0

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.

Improve this question
4
  • 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, 2011 at 15:17
  • sorry, I tried solving it (didn't work), it should work now.
    – ernesto50
    Nov 2, 2011 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, 2011 at 15:24
  • Appearance > Editor!
    – ernesto50
    Nov 2, 2011 at 15:28

3 Answers 3

Reset to default
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.

Improve this answer
4
  • 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, 2011 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, 2011 at 16:17
  • See updated answer.
    – Chip Bennett
    Nov 2, 2011 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, 2011 at 16:59
0

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

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

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.

Improve this answer
1
  • 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, 2011 at 16:02

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.