WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How do I give each page on my site a different background? (15 posts)

  1. maddiebeachbear
    Member
    Posted 1 year ago #

    I am working on a site that needs to have a different photo background on each page. Instead of customizing the "body" tag, though, I want the background set to my "container" div. Also, two of my pages are categories. I know next to nothing about PHP, but if someone gave me clear step-by-step directions I could manage. Can anyone help?

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Gonna need a link to your site, this will require CSS knowledge.

  3. maddiebeachbear
    Member
    Posted 1 year ago #

    I don't have a link because the site has not been published. I know plenty about CSS, just not about PHP.

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    Do you have google chrome?

  5. maddiebeachbear
    Member
    Posted 1 year ago #

    Yes I do. That's what I've been using.

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    Right click on your webpage and select 'Inspect element'.
    In the toolbar that pops up, look at the HTML.
    The <body> element has or should have some unique classes.
    Use those unique classes to identify each page and assign a background image to the containing elements.
    E.g

    .page-id-17 .container {
     background: url("/wp-content/themes/yourTheme/et-cetera.png");
    }
    
    .page-id-18 .container {
     background: url("/wp-content/themes/yourTheme/et-cetera.png");
    }
    
    .page-id-19 .container {
     background: url("/wp-content/themes/yourTheme/et-cetera.png");
    }
  7. maddiebeachbear
    Member
    Posted 1 year ago #

    I don't see where any of the classes are any different on the individual pages. The body is class "customize-support" on every page.

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    Please identify your theme on the WordPress.org theme repository.

  9. maddiebeachbear
    Member
    Posted 1 year ago #

    It's a custom theme. I started from original HTML and CSS that had been validated.

  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    In the file that has the <body> element, use the body_class function to generate those unique classes.

  11. maddiebeachbear
    Member
    Posted 1 year ago #

    Okay, thank you. That seemed to work. Then do I do what you said in the earlier post?

  12. Andrew
    Forum Moderator
    Posted 1 year ago #

    Yes, that's right.

  13. maddiebeachbear
    Member
    Posted 1 year ago #

    Thanks so much! Worked like a charm :). I'm guessing that if I want to change elements with coordinating colors, I need to use a similar process?

  14. Andrew
    Forum Moderator
    Posted 1 year ago #

    Yes, using the body class to uniquely identify each page/ post.

  15. maddiebeachbear
    Member
    Posted 1 year ago #

    Thanks so much! I've got it now.

Topic Closed

This topic has been closed to new replies.

About this Topic