Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Background image on mobile

Featured Lock Resolved Issue
Hi,

I have created this website, and it working good.
When you view the website via google inspect and choose mobile, it looks great: 2018-10-31_19-39-06.jpg
But when you look on a real mobile device, the background looks not so great: Screenshot_20181031-193954_Samsung Internet.jpg

Can someone help me with this?

Regards, Peter

Attachments (2)

  • 2018-10-31_19-39-06.jpg
    2018-10-31_19-39-06.jpg 215.4 KB
  • Screenshot_20181031-193954_Samsung Internet.jpg
    Screenshot_20181031-193954_Samsung Internet.jpg 562.6 KB

12 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
You tested on iphone?
If yes, I have the answer.
Mobile Safari doesn't understand that part of CSS:

background-attachment: fixed;

Why, don't ask me... topic is on internet for a long time.

Paul Frankowski - Staff

More than a month ago #Permalink
The best solution would be to override BG image for mobile view only with smaller image 640px of width.

But temporary please try this code instead :


/* iPhone bg fix */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
.sp-page-builder .page-content #section-id-1532961668884 {
background-size: unset !important;
background-attachment: scroll !important;
background-position: top !important;}
}





Yes, in custom CSS section.
Helix3 have it's own manual on our website.
Or ask Apikko where to add it.

Peter Spiegelenburg

More than a month ago #Permalink
Hi Paul,

No, this is not on iPhone (I don't have one). This is on a Android device (Samsung Galaxy S7).

I have tried with this code in the template, but it is not working. Maybe because the code is specific for iPhone?
There is more custom css in this template, so I know where to add it.
I hope there is someone with another solution?

Regards, Peter

Paul Frankowski - Staff

More than a month ago #Permalink
yes, it was prepared for Iphone. In that case try this (more universal)


@media (max-width: 580px) {
.sp-page-builder .page-content #section-id-1532961668884 {
background-size: unset !important;
background-attachment: scroll !important;
background-position: top !important;}
}



But as I told before it would be much better to use smaller img for mobile view only.

Paul Frankowski - Staff

More than a month ago #Permalink
Method #2
smaller bg img for mobile view only.


@media (max-width: 640px) {
.sp-page-builder .page-content #section-id-1532961668884 {
background-image: url(/images/small-paardebloem.jpg);
background-position: top !important;}
}


create small bg image, max 640px of width , named small-paardebloem.jpg
and upload into main /images folder.

Peter Spiegelenburg

More than a month ago #Permalink
Hi Paul,

I have tried Method #2, created the smaller image, uploaded and added the css.
On the Mobile device, I don't see any changes. But, when I remove the image form the folder, the background has a white color. So, the CSS seems to work (for a bit).
Have you any ideas left how to solve this?

Regards, Peter

Pavel

More than a month ago #Permalink
Mobile Safari doesn't understand that part of CSS:

A small clarification. All mobile browsers, on any platform with the exception of firefox do not understand background-attachment: fixed;.

Paul Frankowski - Staff

More than a month ago #Permalink
I forgot to add "!important"


@media (max-width: 640px) {
.sp-page-builder .page-content #section-id-1532961668884 {
background-image: url(/images/small-paardebloem.jpg) !important;
background-position: top !important;}
}


BUT
are you sure that you have that image ???
https://www.totaltreat.nl/images/small-paardebloem.jpg

Peter Spiegelenburg

More than a month ago #Permalink
I forgot to add "!important"


@media (max-width: 640px) {
.sp-page-builder .page-content #section-id-1532961668884 {
background-image: url(/images/small-paardebloem.jpg) !important;
background-position: top !important;}
}


I have added the "!important", but it is still not working.
I also replaced the complete code, with yours, to avoid typo's, but still not working.


BUT
are you sure that you have that image ???
https://www.totaltreat.nl/images/small-paardebloem.jpg


Yes, the image is there, I did some testen, maybe you looked when I had it renamed, but now it is there.

Regards, Peter

Paul Frankowski - Staff

More than a month ago #Permalink
On my mobile device it look much better now.

Peter Spiegelenburg

More than a month ago #Permalink
Hi Paul, thanks for the help.
It looks better now, I think there was a cache problem on my mobile.
One last question: is it possible to make the background fixed?

Regards, Peter

Paul Frankowski - Staff

More than a month ago #Permalink
As Pavel said, in general not really. This is limitation of mobile browsers.
But for sure there are CSS hacks, search.

Attachments (1)

  • search.png
    search.png 35.1 KB


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 109
Sifat

Sifat

Total Accepted Answers: 64
Toufiq

Toufiq

Total Accepted Answers: 49
Mehtaz Afsana Borsha

Mehtaz Afsana Borsha

Total Accepted Answers: 20
Rashida Rahman

Rashida Rahman

Total Accepted Answers: 12

118

Templates

303434

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us