Hero background image: Page 2

Hero background image

irelius

Additional Info: It is like this on iphone on my site on both chrome and safari. Again, both safari and google on iphone are working with the demo site, just not my site. There are no custom codes that I have changed on the bg to be causing this issue. Please help me resolve. Thank you.

Ninja

irelius
Hi
It depends on the browser properties to accept the overlay.
About the demo site it will be same, may i know the different you are getting the demo as you said you are using same image.
I have not found the same image used on the demo on your site : http://prntscr.com/w21xup
Again the image size is as cover to make it complete in the background. you can set it 100% with code i shared and it would not fill the complete size and make it ugly http://prntscr.com/w21y6g
It normal on the web when you set size as cover.

irelius

Hi pankaj, i changed it back to my own bg now. But as you can see on iphone safari and chrome the background is distorted and too much zoomed in. On samsung it is ok.

Ninja

irelius
It appears safari not allow these properties, can you check the demo site and send me screenshot if there is same issue?

irelius

Hi, as you can see it looks fine on the demo. And its not just safari. Demo is good with both safari and chrome. Chameleon4d.com/index not good with safari and chrome. No idea why this is happening

Ninja

irelius
Hi
I am sure there is issue with custom changes as Demo site does not have any issue.
Please install fresh quickstart package on a test site of your server and check the demo site image working fine on your Phone and after change it. we do not own same model phone to check, in other models there is no issue.

irelius

I am not sure what you mean here. Can you explain please? Chameleon4d.com/index is from the quickstart package. I have not made any custom changes to the background it was like this from the start. I even removed all the custom css styling to test if it works but it did not change anything.

Ninja

irelius
Hi. Please install the quickstart on a test site and submit the details in Edit fields first post for staff.
It's not clear what changes has been made on your current site. any other extension installed. Also not site why in URL it has /index as it should not required .

irelius

Im not sure what that means. What do you mean test site? How do I create a test domain?? Sorry guys I am not the strongest with this stuff. the /index is just a folder i put it in to and named index kind of like staging. That shouldnt reall have anything to do with this i dont think.

Ninja

irelius
irelius
Hi
Actually the issue is i do not own exact same model phone, and in stimulator of Chrome it has iphone 8 and and X that does not showing this problem on your site.
As this issue is not found in the demo so must be something changed on your site after install or 3rd party extension style.

You can download the latest quickstart package, install it on a new subfolder and check if that has same issue.

irelius

Ninja I fixed the issue Pankaj. It is very weird actually the way it fixed but I will put it here incase anyone having same issue. The way I fixed it was I changed the "background position" in the Ja Stark layout settings (not custom css) - changed it from "top left" to "center top" and also changed the "background size" from "cover" to "auto". Any other settings other than these two combinations and it will be zoomed and distorted. Again, really weird and not sure why but it works now and thats all that matters for me haha.

Thanks for your help anyways!

Ninja

irelius
Glad to know it works for you.
As i said you changed something on site, in demo we use Position to center center.

« Previous Page