Different Background on Each Page

  • Author
  • #558237

    I use the twenty ten theme. Is there a way to put a different background on specific pages using CSS and page indicators?

    It seems like this would have already been covered in the forums but I couldn’t find anything.

    The blog I need help with is rockhudsonblog.com.



    I’m fairly new to WordPress so if other people want to chime in with a standard approach, please do.

    However it looks like each page gets a “page-id” as a class on the BODY element. View the source of the page in question and wade down to the BODY tag, and look for CLASS=”…page-id-nn…” where nn is the page-id number. (Or use IE’s Developer Tools, for example.)

    You’ll just create CSS for each page that only apply to childen of the BODY element with class “page-id-nn.” For example, for a page with “page-id-28”:

    /* CSS */
    body.page-id-28 h3 { color: green }
    /* Headings will be green only on page-id-28 */

    How you use CSS to specify the image in the header is dependent on the theme you are running. Since normally the image is specified in HTML based on the value in the Dashboard, you’ll need to make some workaround so you can specify it in CSS.

    Looking at the twenty ten theme, one way to do it would be to set the header image for the whole site to a transparent GIF. Then, use CSS to set the background-image of that element. For example:

    /* CSS */
    body #branding img { background-image: url(mydefaultimage.jpg) }
    body.page-id-28 #branding img { background-image: url(mycustomimage.jpg) }

    In this example, the first line specifies the default image for pages in your site. The second line customizes an image just for pages with page-id-28.

The topic ‘Different Background on Each Page’ is closed to new replies.