Hello to all,

please could somebody give me a hint... I added a background image to my site by writing some lines of css to my theme's css file. Now I want to restrict this background image to the home page only (which has its own layout). I've no idea how to achieve this, so I'm happy for any suggestion.

Thank you and best regards  


... sorry for asking... I found a solution ... quiet simple... I just added an additional class to the l-wrapper-div within the  corresponding layout.tpl.php  :-)

Happy sunday

Hi Z4N8r,

There are probably many ways to achieve the desired effect, but it seems to me that the easiest is the following:

Every Backdrop CMS home page has a 'front' class in the 'body' element of it's HTML structure.

Therefore, it is possible to add in your theme a CSS rule that shows this background image only at your front page:

body .front {     background-image: url( your image ); }

This technique can also be used in many other cases by using the module Term Body Class  https://backdropcms.org/project/term_body_class

You also may be  use module CSS Injector for specific CSS rules at your home page. In Drupal there was very useful module https://www.drupal.org/project/themer for such cases but I don't know if anything similar is available for Backdrop CMS.


Thank you very much, amilenkov,

your solution seems to be more straightforward and "cleaner" than mine! 

Best regards