Headerbar problem on Iphone and Ipad

Good morning, I am working with the Advocat template, and the headerbar position, on the iphon and on the ipad the photo is very large, it looks bad.
I have observed that the demo of your Advocat website happens the same.
I have tried to put this code in theme css: @media only screen and (max-width: 768px) {
#headerbar {
background-attachment: scroll! important;
background-size: contain; }
}
But it does not work.
How could I solve this problem?
Thank you.

Hello, more details please. Screenshot, Url and so on.
The headerbar is set to cover, please take a look to the html code of the module and replace the heigh

I honestly believe that my URL does not matter, because in its DEMO page of the Advocat template, the same thing happens, if I look at its DEMO page on an iphone or ipad all the photos that are backgrounds look bad.
So it is already a problem of origin.
Give it a try with the Joomlaplates advocat template.
Thank you very much for answering.

Hello, its not the position headerbar, its the poistio Top-A

But this should help

@media screen and (max-width: 768px) {
#top-a, #top-b, #top-c, #top-d, #bottom-a, #bottom-b, #bottom-c, #bottom-d, .section-logo {background-attachment:scroll}
.top-a-outer, .top-b-outer, .top-c-outer, .top-d-outer, .bottom-a-outer, .bottom-b-outer, .bottom-c-outer, .bottom-d-outer, #main-content{
padding:5% 0 !important;
background-attachment:scroll;
background-size: contain;}
}

Hello, I am sending you two screenshots, one from my page and one from yours.
I think it is the headerbar position, what goes wrong is the photo.
Thank you

Please check the module position in Joomla. I think its top- a.
Btw did you add the code?