Different backgrounds for different pages

  1. last year

    Hello, how can we have different background images for different pages?

    Hi @peteping, the editor only allows the user to edit the background for all pages at once.

    To add a custom background to each page you could add a class to the body for each new page. Using <body class="{{ page.title|replace(' ', '-') }}"> would add a custom class to the body on each page that matches the page title, but removes any spaces within it.

    This would output something like:

    <body class="Page-Title">

    You could then apply a custom background using CSS, e.g:

    .Page-Title { background: #800020; }

    I hope this is a sufficient answer to your problem.

  2. Or even just some with an image for a background and some will a color or gradient for the background?

  3. Dave

    16 Sep 2015 Administrator Answer

    Hi @peteping, the editor only allows the user to edit the background for all pages at once.

    To add a custom background to each page you could add a class to the body for each new page. Using <body class="{{ page.title|replace(' ', '-') }}"> would add a custom class to the body on each page that matches the page title, but removes any spaces within it.

    This would output something like:

    <body class="Page-Title">

    You could then apply a custom background using CSS, e.g:

    .Page-Title { background: #800020; }

    I hope this is a sufficient answer to your problem.

  4. Yes. Thanks :)

  5. Hi Dave,

    I presume i add .Page-Title { background: #800020; } to theme.less

    Where do I add <body class="{{ page.title|replace(' ', '-') }}">
    ?

    Thanks

  6. Dave

    17 Sep 2015 Administrator

    @peteping that is correct.

    <body class="{{ page.title|replace(' ', '-') }}"> should replace <body> at the top of the page, you should be able to find it in either the layout.twig file, or page type files (default.twig, blogpost.twig and so on).

  7. thanks :)

or Sign Up to reply!