Non-scrolling banner with maincontents scrolling over it

Dear all,

Working with a template created with TemplateCK, I am unable to create what I want, and I am hoping you can help.

The template starts with a header_wrapper, in which there is a bannerrow that holds the logo and the menu. This combo has to stay on all pages, and functions as it should.

Below that, there is the main_wrapper. This starts with a page wide block. This block is located before the maincontent. Now I want the maincontent to scroll over the block, where the content of the block is not scrolling. The content of the block depends on the page, so AFAIK it cannot be defined in the template, but needs to be filled in Joomla. Currently the block is filled with an image per page. This is done by putting each image in a separate custom module. These are assigned to specific menu items.

So I have the images on their respective pages, below the logo/menu and before the maincontents, but it scrolls along with the maincontents. How can I change this behaviour? I've already tried to change this by using position tags, but I do not get it working.

Any help would be quite appreciated!

Kind regards,

JEMO

Hi
I'm trying to understand

I want the maincontent to scroll over the block,

do you want a parallax image ? image fixed and the rest of the page scrolling ?

if yes, this shall be done using a background image. Give me the url of your page so that I can check and confirm that I have understood the request please
CEd

I have received your email. you can try something like that
Update the html code of your custom module like that :

and add the custom css in your page :

Too bad; still no parallax effect   (but thanks for trying to help me out)

I earlier tried the position to be relative with a z-index of -1, but I did not include a value for height. I was - at that time - indeed wondering how I could give the banner image a height, so that is a good one. However, I wonder whether it was you intent to make the height of the image equal to 30% of the viewports width (30vw); that can create interesting results, I'd say.

I am also not sure whether I have added the custom CSS in the correct place. In Template Creator CK I added that to the Custom CSS that is available when pressing the </> Code button on the left. Is that where you were pointing me to?

the html code of your module is not what I proposed
and the custom css file has illegal characters : single quote is not a valid css comment :
developer.mozilla.org/en-US/docs/Web/CSS/Comments
(the place in Template Creator CK is ok)

Apologies! I missed the style="position: fixed;" in the img. Now it at least does not move anymore. Great. I will continue to improve this.