Hero background image

irelius

Hello - I am having a bit of trouble with this Ja Stark Template. All is looking good on the pc, however on the mobile site, the background is stretched and zoomed too much. Is there any fix for this? Please kindly advise. Thank you.

Ninja

irelius
Hi
In the Hero section the background image is load behind the text and it use th size cover.
When you see it on the mobile view it loads the same and work as cover it will fill the complete background behind the text.

irelius

Ninja

How can I fix this, Pankaj? It does not look very professional on the mobile for my client. Should I change the CSS code for the bg from "cover" to something else? Or should I re-size the image? Please help 🙁

Ninja

irelius
Hi
Its not a bug, its normal.
here is style code you can override in custom css and set it as per needs.
If you want this reponsive it would not cover all area.

#t4-hero .bg-overlay-image {
    background-image: url(/index/images/demo/hero/hero-1.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    background-attachment: fixed;
}

irelius

Ninja Hi, I played with that code and its not working. The version on my mobile of bg is still extremely stretched out to the point where I see individual pixels. This is so weird. I played with all of those css functions that you posted but nothing. Only thing I was able to do was change the position a little - other than that it just goes black. Please help 🙁

Ninja

irelius
Hi
its work as cover this is normal.
The code above is used and you can play with it

@media(max-width:768px){#t4-hero .bg-overlay-image {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    background-attachment: fixed;
}

This work only for mobile you can set the cover to 100% to make it responsive but it will not cover all area as its normal if you want responsive how it will cover all text background.
Hope its clear now.

irelius

Hello - Please find the attached screenshots from my iphone 12. I changed the bg to the original picture from demo. As you can see, the one on my site is extremely stretched and zoomed - but not on the live demo on joomlart for stark, that one looks fine.

By the way, this problem I have only seen on iphone. On samsung device it is working normally. But still, even on iphone, the demo version looks good.

Please help. Thank you.

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!