Different background for different Post or Pages…

  • Hi, I’m new to wordpress and I’m trying to make custom backgrounds for different pages or post… can any one provide me with a simple example on how to do it?

    I have 5 pages:
    1-HOMEPAGE
    2-SOMETHING TO TALK ABOUT…
    3-GALLERY
    4-ABOUT
    5-CONTACT

    that I want to have different Background Images or Background Color I would also like to know how to apply different backgrounds for different posts.

    I’m sorry for asking for so much but I’ve tried reading some of the howto’s on this site but they don’t give good examples of how to or where to put the codes.

    Thanks in advance.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    If you’re using a theme that is distributed on www.remarpro.com, there should be a class assigned to the <body> HTML element that uniquely identifies each webpage.

    You can therefore use these classes to target specific pages in CSS.
    E.g;

    .page-id-46 {
 background-image: url("/wp-content/themes/yourTheme/images/background-1.png");
}

.page-id-47 {
 background-image: url("/wp-content/themes/yourTheme/images/background-2.png");
}

.page-id-48 {
 background-image: url("/wp-content/themes/yourTheme/images/background-3.png");
}

    Et cetera.

    Thread Starter MarkSinister

    (@marksinister)

    Thanks for the help, but I’m not using any wordpress theme I’m building it from scratch.

    Also do you know what the Class in the body should look like?
    is it this <?php body_class();?>?

    Also I take it .page-id-46, .page-id-47, .page-id-48 are the names of the pages? So in my case it would be HOMEPAGE, SOMETHING TO TALK ABOUT…, GALLERY, ABOUT, CONTACT?

    Yes, to the body class.

    No, those are not names you can use for CSS – you need to look at the generated code for your page – in the body tag you will find the unique classes for each page.

    On your site, the home page body tag looks like this:

    <body class="home page page-id-70 page-template-default">

    So you can use .home or .page-id-70 to target that page only.

    For your ABOUT page, it’s this:

    <body class="page page-id-64 page-template-default">

    So you can use .page-id-64

    …

    Thread Starter MarkSinister

    (@marksinister)

    Thanks even though your explanation was still a little confusing I got it to work now. My only other problem is the Homepage and the Post Page list??

    I was able to edit the Homepage using
    .home {
    background-image:url(“background image path”);
    }

    I wanted to change the Post List page background but for some reason I can’t? My site is setup to use Static front page display which moves my Post Page to another page.

    I read this in the Theme Development:

    front-page.php
    The front page template, it is only used if you use a static front page.
    home.php
    The home page template, which is the front page by default. If you use a static front page this is the template for the page with the latest posts.

    The problem is it says if you use Static Front Page Home.php is for your Post Page List and Front-page.php is for your Static Homepage.

    But when I put the code in CSS for “.front-page { CSS Code }” Nothing happens to front-page.php but if I use the “.home { CSS Code }” it edits the front-page.php page??? What’s up with that???

    So what is the CSS tag for the Post list page??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Different background for different Post or Pages…’ is closed to new replies.