Responsive Menu with different background images

Question

I have a website with a special background-images on the article=home and a different background-image on all other articles. I use the following code in the template index.php:

<?php
$active = Jfactory::getApplication()->getMenu()->getActive();

if ($active->alias == 'home') {
?>
<style type="text/css">
<!--
body {
    background-image: url(http://mywebsite.com/templates/img/page_home.jpeg);}
-->
</style>
<?php } else { ?>
<style type="text/css">
<!--
    background-image: url(http://mywebsite.com/templates/img/page_others.jpeg);}
-->
</style>

---

It's working fine on Desktops. As soon the as the monitor width is smaller than specified in ".css @media" and the responsive Menu-Button is activ then the ...->getMenu()->getActive(); is not anymore saying the "$active->alias". How can i ask the responseive Menu alias?

Answer 1

Future template updates will likely undo your template index.php file edits.

A better way to do this (and probably worth a try if your initial method is not working consistently) is to edit your home page menu item and add a Page Class e.g. home-page under the "Page Display" tab:

You can then use the home-page CSS selector in your custom CSS file to override the page background for the Home Page:

body {
  background-image: url(http://mywebsite.com/templates/img/page_home.jpeg);
}
.home-page
  background-image: url(http://mywebsite.com/templates/img/page_others.jpeg);
}

See https://joomla.stackexchange.com/a/3878/120 for details on how to create a custom CSS file for your template.

Answer 2

You'd better check if the menu item is default one (i.e. Front page) than checking for home alias which might be easily changed in admin.

<?php  
  $app = JFactory::getApplication();  
  $menu = $app->getMenu();  
  if ($menu->getActive() == $menu->getDefault()) {  
    echo 'This is the front page';  
  }  
?>

I'm sure that default menu item doesn't change with screen width, i.e. stays the same in responsive mode too.

More details can be found on https://docs.joomla.org/How_to_determine_if_the_user_is_viewing_the_front_page