Hide header-hero picture for internal pages

Hi there, I try to hide one header picture for the internal pages. It is defined as .header-hero in the CSS. What is the way to make it visible for the first page only and hide it for the internal pages?

The CSS code:

.header-hero {
  padding: 10rem 0;
  background: url(http://localhost/wb/media/header.jpg) center center no-repeat;
  background-size: cover;
}

Can I add some code to the CSS that will hide the picture for all other page and make it visible just for one page or 2 for multi language site?
Something like:

.page-xxxxxxxxxx .header-hero {display:none !important;}

Or add some script to hide the DIV for the header somehow like:

<script>
  if (window.location.href != "http://example.com/pages/home.php") {
$('header_div').hide();
}
  </script>

Thanks in advance!

Regards,

Rumen

Some class on the body may be helpful like is-homepage - see how WordPress does it for example.

But I fail to see how this is about Foundation Sites.

I don’t use WordPress I use Websitebaker which is actually much more flexible and secure. But that’s not the point.

Isn’t the header-hero class part of the foundation.min.css ??? I think it is there if not sorry for the wrong place to put that question.

It was just an example regarding classes on the body element.

OK that was a hint. I will try. Thanks!

Foundation Sites is a CSS framework. A logic like you explain regarding showing things on a specific page depends on your markup.

We do not have a header-hero class in the framework. See https://raw.githubusercontent.com/foundation/foundation-sites/develop/dist/css/foundation.css