WebSite X5Help Center

 
Vlado _.
Vlado _.
User

Background images are not displayed correctly on smartphone  en

Auteur : Vlado _.
Visité 3222, Followers 1, Partagé 0  

Hi, at v17 are background images not displayed correctly on smartphone.

Background image is displayed like just small piece of pc format image.

Also whole format is a bit strange - there is free space on right side and hamburger menu is sometimes diplayed and sometimes not.

I set all settings for all resolutions and at preview everything works perfect whit all kind of resolution.

On pc everything work nice.

http://www.greenoak.sk

Thanks in advance for any help

v

Posté le
41 RéPONSES - 2 UTILE
Albert X
Albert X
User

Hello.

As for the background images, they do not really adapt to the resolution of the screen.
I raised the problem on this post, and the support answered me that it was not possible with Website without the addition of personal code. And yet other software allow it quite simply.
Maybe in a future update ...

Jean-Serge.

Lire plus
Posté le de Albert X
Vlado _.
Vlado _.
User
Auteur

Hi, I hope is not true...

If so, Incomedia can not sell this product because it does not work.

In preview background images adapt to the resolution with no problem....

btw hamburger menu on smartphone sometimes works sometimes not.

On pc is everything fine, but how many people check your web on the pc today?

Thanks for reply

v

Lire plus
Posté le de Vlado _.
Vlado _.
Vlado _.
User
Auteur

I checked Incomedia website and there is no problem with displaying on smartphone.
So I suppose that problem can be fixed, or Incomedia´s web is not created in WX5.....

Can anybody from Incomedia reply to my questions?

Or do I have to send them an email directly?

Thanks

v

Lire plus
Posté le de Vlado _.
Vlado _.
Vlado _.
User
Auteur

Here is the preview with all resolutions

Lire plus
Posté le de Vlado _.
Esahc ..
Esahc ..
Moderator

Vlado, with the background image set in template structure, page background, have you selected fit to window for the image. I see you have different backgrounds for different resolutions, have you ensured the image is resized appropriate to the display resolution (ie for mobile, the picture should be a maximum of 640px wide)?

As for the white space and missing menu occasionally, you have content outside of the available area in the header (& possibly footer). Your logo on mobile is way too big. The logo or any image or content can be resized independently for each resolution. Under template, template content, look for anything near the edges, if you cannot see all 8 handles it needs repositioning, resizing or hiding at that resolution and below.

Lire plus
Posté le de Esahc ..
Vlado _.
Vlado _.
User
Auteur

Hi Esahc,

I have the same backround for all resolution  - I just posted different page preview for each resolution.

I have no option in template structure for header, page background selected fit to window obtion for the image as you can see (Ihave Slovak version, if you need translate something let me know).

Photo to backgraund  I put here

What do you mean "have you ensured the image is resized appropriate to the display resolution"?

I am gonna check content outside of the available area in the header (& possibly footer).

Thanks for help

Lire plus
Posté le de Vlado _.
Vlado _.
Vlado _.
User
Auteur

"for the white space and missing menu occasionally"

I resized all staff at header and footer.

It looks better, menu works fine but two pages "garaze" and "altanky" are still not ok.

There is still missing menu occasionally and when menu appears and you try to open it nothing happens - but if you scroll on the right there is open menu. On the rest of the pages menu works fine.

At preview everything looks great...

Lire plus
Posté le de Vlado _.
Vlado _.
Vlado _.
User
Auteur

Hi Esahc,

I changed some settings at sticking strip, and we can say that menu on smartphone is acceptable for now

Last thing I need to solve is the background image settings.

Could you please try to give me some advice?

Thanks a lot

v

Lire plus
Posté le de Vlado _.
Esahc ..
Esahc ..
Moderator

Vlado, I am running out of advise, but have you tried opening the page background image in a paint package and resampling/resizing to say 480 wide x 600 high (or crop a suitable bit out and resample that down), then save as imagename-small.jpg

Replace the background picture for only the mobile phone resolution with the new small image. Does that fix it??

Lire plus
Posté le de Esahc ..
Vlado _.
Vlado _.
User
Auteur

Esahc, I am afraid that this will not help.

For example photo for page "altanok" with gazebo has size 634 x 400 and 117 kb.

What I do not understand is, that in the preview is everything ok - so wx5 has to adapt image for different resolutions.

I wrote to incomedia but I have no reply so far.

I think that this can not be a problem, hundrets of people use backgraund images in wx5, or do not they?

Lire plus
Posté le de Vlado _.
Esahc ..
Esahc ..
Moderator

Vlado, have you tried a different browser on your mobile? I used firefox and saw what you have in your mobile preview. Chrome produces something that looks like sand dunes. I suspect it is something they do to speed up downloads (which is why I recommended a background image specifically for the mobile view).

Lire plus
Posté le de Esahc ..
Vlado _.
Vlado _.
User
Auteur

Esahc, that is great (almost)!

There is only small problem - to force other people to open my web on the firefox only :))

Anyway it means that it should work somehow on the other browser too. Question is how?

Should I ask people from google? Or do you have some other advices?

However you are awesome man!

v

Lire plus
Posté le de Vlado _.
Esahc ..
Esahc ..
Moderator

Vlado, try an alternative image for mobiles or perhaps for the mobile view only, set the background as page contents rather than page background, I am now officially out of ideas sorry.

Good luck!!

Lire plus
Posté le de Esahc ..
Vlado _.
Vlado _.
User
Auteur

Tried. No change :(

I try ask google.

One more thanks for all your help!

v

Lire plus
Posté le de Vlado _.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

...!...  5.55 MB ... ! ... 5232x3488 pixel ...!...  ... ... ↓↓↓ ... smartphone ...↓↓↓

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Vlado _.
Vlado _.
User
Auteur

Hi Kol Asim,

Thanks for help.
I resized all images to 800 x 600.
With the same result on chrome...
If you have some other ideas, I would very appreciate them.

Thanks in advance

v

Lire plus
Posté le de Vlado _.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

(It > En) ... 792 KB! ... they are still too many ...
... do not use the image format in "*.png"(!), but use the "*.jpg" format, at least six times lighter ...
... if you are interested, you could solve it quickly with little EXTRA code; ... or, if you prefer, wait for the opinion of STAFF ...

ciao

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Vlado _.
Vlado _.
User
Auteur

ok, I am gonna resize it to jpg

what do you mean "you could solve it quickly with little EXTRA code"?

thanks

v

Lire plus
Posté le de Vlado _.
Vlado _.
Vlado _.
User
Auteur

with jpg still the same result on chrome...

v

Lire plus
Posté le de Vlado _.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

>> Step 3 - Map > The Page Properties window | ▪Expert  | ▪Custom Code: ▼Before closing the HEAD tag >>>

... copy and paste the code:

<style>
body {background: transparent url('http://www.greenoak.sk/images/brushed-oak.jpg') no-repeat center center; background-size: cover; background-attachment: fixed;}
#imPageExtContainer { background: url('');}
</style>

...................................

http://www.greenoak.sk/images/brushed-oak.jpg

...or:

images/brushed-oak.jpg

....................................

...!... ... change the name of the images in the relative pages ...

.

ciao

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Vlado _.
Vlado _.
User
Auteur

Man, I love you!!!

What can I do for you?

Thanks a lot!

v

Lire plus
Posté le de Vlado _.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

... I checked on my smartphone: perfect! ... wink ... ciao ...

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Vlado _.
Vlado _.
User
Auteur

Hi KolAsim,

I found out that on the Iphone is background still displayed with wrong background (safari and chrome)  :(

Do you think there is a chance to solve it somehow?

On Mac it looks ok.

Thanks

v

Lire plus
Posté le de Vlado _.
Vlado _.
Vlado _.
User
Auteur

.....is background still displayed with wrong resolution....

Lire plus
Posté le de Vlado _.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

(It > En) ... iphpne ... surprised... ouch ouch ouch ...undecided...laughing
  >> this  is my old invention; the first absolute resize ratio C/C | W/H;
... it should be cross browser ...
... let me know how it behaves on your iphone ...
... if it works well, then we'll see how to use the code on your page ...

.

ciao

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Vlado _.
Vlado _.
User
Auteur

on my (of course my doughter´s) iphone it looks perfecto :)

Lire plus
Posté le de Vlado _.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

1) ... Expert section | ▪Custom Code: > Before closing the BODY tag:

<!-- === === K === x </BODY> === -->
<div id="div_customK"><img id="imgK" width="100%" style="position:absolute;height:100%" src="http://www.greenoak.sk/images/brushed-oak.jpg" /> </div>
<!-- === === K === === -->

----------------------------------------------------------------------------

2) ... Expert section | ▪Custom Code: > Before closing the HEAD tag:

<!-- - ===================K==== x </HEAD >============ - -->
<style>
#div_customK {position:fixed; top:0px;left:0px;width:100%;height:100%;z-index:-1;overflow: hidden;}
</style>
<script>
function h_imgK(){
var ww =3; // larghezza immagini;
var hh =2; // altezza immagini;
var wdiviframe = document.getElementById('div_customK').offsetWidth;
var hdiviframe = document.getElementById('div_customK').offsetHeight;
var hiframe = hdiviframe
var hiframe=Math.round(wdiviframe*hh/ww);
if((wdiviframe/hdiviframe) >= (ww/hh)) {
document.getElementById('imgK').style.width= wdiviframe +"px";
document.getElementById('imgK').style.height=hiframe +"px";
var hiframe=wdiviframe*hh/ww;
var diffh = ( hiframe -hdiviframe ) / 2 ;
document.getElementById('imgK').style.top = -diffh+"px";
document.getElementById('imgK').style.left = 0+"px";}
else { wiframe=wdiviframe*ww/hh;
wimgK = hdiviframe*ww/hh;
diffw = (wimgK - wdiviframe) / 2;
document.getElementById('imgK').style.height = 100 + "%";
document.getElementById('imgK').style.width = wimgK + "px";
document.getElementById('imgK').style.left = - diffw + "px"
document.getElementById('imgK').style.top = 0 +"px";}}
window.onload = function () {h_imgK();document.getElementById("imPageExtContainer").style.backgroundImage = "url('none')"; }
window.onresize = function () {h_imgK();}
</script>
<!-- - ===================K================ - -->

-----------------

ciao

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Vlado _.
Vlado _.
User
Auteur

Hi,

good news is that background looks ok on the iphone :)

but on all devices (iphone, mac, pc, android phone) is for all pages (home, garaze, altanky, nabytok, kontakt)  the same background image - everywhere is the same image  brushed-oak :(

Lire plus
Posté le de Vlado _.
Vlado _.
Vlado _.
User
Auteur

Hi, should I insert the same code also to  3 - Map > The Page Properties window | ▪Expert,  or only here?

Or should be also here   2) ... Expert section | ▪Custom Code: > Before closing the HEAD tag    where I inserted it already?

In 3 - Map > The Page Properties window | ▪Expert   we inserted already code BEFORE CLOSING THE HEAD TAG so should I insert it to   BEFORE CLOSING THE BODY TAG?

Thanks

Lire plus
Posté le de Vlado _.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

(It> En) ... ... come puoi vedere sono due codici, 1) e 2) , da inserire dove è stato indicato, nelle proprietà della pagina , per ogni pagina con le stesse caratteristiche, cambiando l'URL (SRC), 1).   di immagine con quella della pagina relativa ...

1) ...   ▪ Codice personalizzato:  >  Prima di chiudere il tag BODY

2) ... ▪Codice personalizzato:> Prima di chiudere il tag HEAD

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

(It > En) ... ... as you can see are two codes, 1) and 2), to be inserted where it has been indicated, in the page properties, for each page with the same characteristics, changing the URL (SRC), 1), of the image with that of the relative page ...

1) ...  ▪Custom Code: > Before closing the BODY tag

2) ...  ▪Custom Code: > Before closing the HEAD tag

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Vlado _.
Vlado _.
User
Auteur

Sorry, but I have no idea about codes at all   :)

So I am gonna insert the new code in step 3 - Map > The Page Properties window | ▪Expert    to   BEFORE CLOSING THE BODY TAG.

And old codes stay in where they are.

Am I right?

Lire plus
Posté le de Vlado _.
Vlado _.
Vlado _.
User
Auteur

Sorry again, I am totally confused.

Wwhat should I insert in Step 3 - Map > The Page Properties window | ▪Expert ?

thanks

Lire plus
Posté le de Vlado _.
Vlado _.
Vlado _.
User
Auteur

If I understand you correctly, I should insert code No. 2 (the long one) instead of old code to Step 3 - Map > The Page Properties window | ▪Expert

Code 1. (the short one) stay wher it is.

Am I right?

Thanks

Lire plus
Posté le de Vlado _.
Vlado _.
Vlado _.
User
Auteur

This does not work.

I tried to put the cod 2. instead of old code to Step 3 - Map > The Page Properties window | ▪Expert.

Result is the same background image for all pages :(


In old code I had to insert the name for every single background image separately - so this is probably why it does not work properly..

Lire plus
Posté le de Vlado _.
Vlado _.
Vlado _.
User
Auteur
 ‪ KolAsim ‪ ‪
Vlado _. ... ... ... And old codes stay in where they are. ... ... ... ... OK ...  ... ... these no! ...to delete: https://helpcenter.websitex5.com/fr/post/202531#comment21 .

Hi KolAsim,

I tried it.
I inserted new codes 1 and 2 according your instruction and deleted old code from step 3, but it does not work either.

Everywhere is the same background - brushed oak :(
I currently have a web-based version for all devices except the iPhone

If you find a solution for all devices including iPhone in the future, I would be very grateful if you let me know

Thanks for all your effort and help

v

Lire plus
Posté le de Vlado _.
Vlado _.
Vlado _.
User
Auteur

Hi KolAsim,

Please ignore my last posts.
I am sorry for bothering you during last two days with my misunderstanding and my stupidity.


Your codes work perfectly and your help was quick and great.

Background images are displayed correctly at all devices including pc, mac,android phone and iphone of my daughter :)

Problem was on my side. It took me lot of time to understand the simply way how to use them, as you were trying to explain it to me :)
As I said, codes are f.....g mystery for me :)

I hope that Incomedia pay you a lot of money for this help.
You do their job and help people like me instead of them.


btw

As I discovered yesterday, you can google everything except contact to Google support  :)



Thanks for all

Best regards

v

Lire plus
Posté le de Vlado _.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

... I'm back now, I'm glad to learn that you've solved. ... wink

Lire plus
Posté le de  ‪ KolAsim ‪ ‪