Need help in removing a bg image

Question

I have a WARP6 Joomlaplates' JP-X2 template and I'm on a latest version of Joomla. I used to have a big bg image of a lady on every site page. So one has to scroll down to see the actual pages' content. So I decided to leave the lady bg image just on a main page and to remove it from the other pages. In backend of Joomla in Template Manager in current template's settings I have a way of assigning a bg image just for a main page. So now it's there (and it's fine!), BUT... on the rest of the pages I see a huge and ugly white space where the lady's image used to be. And I don't know why white space is there and how to get rid of it. Here's the link to the site: Site's main page I'll attach two image files to demonstrate the problem. Like how it is with a bg image and how it is without it. Plus I'll attach current template's custom.css file. Here's a link to custom.css file: template's custom.css file

Answer 1

There's probably an easier way but you could achieve the desired result as follows:

Add a page class for the home page e.g. home-page

In the custom.css file, replace this:

.header-outer {background: #fff url(https://apostasia.ru/images/1.jpg) no-repeat top center;background-size: cover;height: 100vh;}

with this:

.header-outer {
    background: none;
    height: 0;
}

.home-page .header-outer {
    background: #fff url(https://apostasia.ru/images/1.jpg) no-repeat top center;
    background-size: auto;
    background-size: cover;
    height: 100vh;
}

This will hide the image on all pages except the Home page.