banner is not resizing in Apple IOS devices

[Phanti09]

Hello and thank you for the nature template.
I'm using it for my personal website bommelreisen.de. I created an into with the banner module. Everything looks nice in any browser, the background picture is resizing perfectly. But if I use my IPad or Iphone, there is only a small part of the background image visible. Resizing does not work at all.
Maybe I'm doing something wrong in the site module? I added some screenshots.
Thanks for your comment.
Stefan

![Bild_2023-01-04_151415844](https:

//user-images.githubusercontent.com/99402567/210573971-890bbe82-8bec-48a9-8047-fa0fa6cdc484.png)

[drmenzelit]

The banner is working as defined:
.banner-overlay { height: var(--bannerheight); background-repeat: no-repeat; background-attachment: fixed; background-position: center,center; background-size: cover; }
You can change the definition in your user.css file (play with background-position and background-size)
And for the text try to avoid inline css styling.

[Phanti09]

Hello,
the same issue happens also at your demo page in styles 2,3 and 4. When I use my Iphone for the demo, the background picture for styles 2, 3 and four is empty.
Do you have further instructions to the usage, especially how to use the styles or banner functionality. I'm more or less a Joomla user, not a developer.
Thanks a lot
Stefan

[drmenzelit]

It seems to be a problem in Iphone (I can't test, because I haven't one). Try with the following css code (create a user.css file inside media/templates/site/nature/css)

.banner-overlay { background-attachment: scroll; background-position: top, left; }