Setting a diferent Page BG for various templates

  • Hi i’m an absolute novice and although have found multiple similar(ish) queries on this, am not able to follow the directions, so hoping someone can assist with exact code I can cut+paste to achieve the desired effect.

    I’m trying to set-up that “Full-width” Page Template to use a different BG Image compared to main page and other templates.

    Let’s say the file is location/fileA.png

    Could someone please help me with exact code (and where to insert it, in which of the files) to achieve this?

    Very lost and frustrated, hope someone can assist!

    Main Page: https://dev.dsokolov.ca/
    Page that needs alternate BG: https://dev.dsokolov.ca/?page_id=18 (using ‘fullscreen’ template.

Viewing 3 replies - 1 through 3 (of 3 total)

  • First you have to create a new page template for that special page.

    You can duplicate the current page.php, and name the new file page-a.php for example.

    Then at the beginning of that new file, add this
    /**
    * Template Name: YOUR NEW TEMPLATE NAME
    *
    */

    This will allow you to select the new template from the back-end.

    In that new template, you also have to assign a new class to <body>, say class background-a

    Then you have to add css.
    body.background-a { background:url(location/fileA.png) no-repeat; }

    your theme uses body_class() https://codex.www.ads-software.com/Function_Reference/body_class

    – therefore you will have page template specific css classes in the body tag of pages which are using a template;

    example:

    .page-template-fullwidth

    Thread Starter gqelements

    (@gqelements)

    Thanks to both posters, and esp. to alchymyth, as your post lead me to the solution, achieved through translucent BG

    The next challenge is to Get RID of the (now left blank) container of the front page….

    Can anyone suggest what TEMPLATE governs my index page? Subsequently I will need to edit to somehow delete any references to CONTENT div or container (to get rid of that translucent box from the Index page only…

    I tried looking a the source of the page but can’t quite figure it out…

    Thanks so far for all the help, this is fun!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Setting a diferent Page BG for various templates’ is closed to new replies.