WordPress.org

Support

Support » How-To and Troubleshooting » Set background image for body of main page only

Set background image for body of main page only

  • Hi. I am trying to set up code in the stylesheet for the 2011 theme so that a background image will appear in the body of the main page only. So far what I have is like this:

    /* Profile page-id-1 */
    body.page-id-1.main {background-image: url(http://milwproduc.com/wp-content/uploads/2012/11/mmp_ghost_shadow.jpg) repeat}

    I have seen some good examples on this forum and elswhere, but nothing I have tried to adapt has worked. I am still fairly new to WordPress, so please bear with me.

Viewing 10 replies - 1 through 10 (of 10 total)
  • try

    .page-id-1
    {
    background-image: url(http://milwproduc.com/wp-content/uploads/2012/11/mmp_ghost_shadow.jpg);
    }

    Thank you for the input. I am afraid that so far, no luck.

    I think this only works for static pages.
    try:

    .home

    or

    .blog

    instead of .page-id

    Moderator Michael

    @alchymyth

    Forum Moderator

    the ‘main page’ (whatever you associate with that) of Twenty Eleven might have the body_class of .home

    http://codex.wordpress.org/Function_Reference/body_class

    don’t guess
    – use a browser inspection tool (such as Firebug) to find out which css classes are present in the body tag,
    – or look into the html code of that ‘main page’ in the browser, and look for the css classes in the body tag.

    otherwise please post a link, I can look at it in firebug.

    also, be aware that the sytax is wrong in your original code sample, ..the types of brackets, colin, semi-colon, ect. Mke sure that’s correct or nothing will work right.

    OK, that did something. The background for the home page is changed, while for the others it is intact. How do I set it so that the background image shows up in/on the body of the page?

    Moderator Michael

    @alchymyth

    Forum Moderator

    so that the background image shows up in/on the body of the page?

    you might be referring to the container with the css id #page;

    i.e. try:

    .home #page { background-image: ... }

    results might be unexpected as the theme is flexible, i.e. changes width for small browsers.

    without seeing it, hard to know for sure. Otherwise you can just try different body class selectors, check Sweeper’s link for that.

    YES! Thank you!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Set background image for body of main page only’ is closed to new replies.