WebSite X5Help Center

 
Malcolm P.
Malcolm P.
User

Rezize page background with screen width  en

Autor: Malcolm P.
Visitado 277, Seguidores 3, Compartilhado 0  

The site I'm currently working on has an individual fixed page background for the home page (set in Page Properties/Graphic), with other page elements scrolling in front of the background in a semi-parallax format. It works fine on a PC or larger screens.

The client is complaining that when viewed on a mobile device the full-size image is simply cropped to the screen width rather than being resized, so that she only sees a small portion of the background image corresponding to the mobile screen size.

Is there any way of accomplishing what she wants, i.e. a background on a single page that resizes for mobile devices rather than simply being cropped?

I tried the suggestion in the Guides to use 'Fit to Window' in the Template Structure/Page background setting instead, but that applies the same background to all pages, which is not what I want. And even then the background did not resize as I expected it to from the description.

The same site also has other pages with a cell background image set as 'Fit to Window' and those images don't resize with the page width either. Am I missing something here?

All suggestions gratefully received as ever.

Many thanks.

Publicado em
19 RESPOSTAS
Aleksej H.
Aleksej H.
Moderator
Usuário do mês RU

Hello.You are right, this setting should help.

Please give a link to the page of the site.
What is your device? Which browser and which version of browser? Have you tried to clear the cache?

Ler mais
Publicado em de Aleksej H.
Malcolm P.
Malcolm P.
User
Autor

Thanks Aleksej.

The home page is http://stonehousestudios.co.uk/ The background image she is complaining about is the static one of the studio building behind the scrolling foreground elements.

See also the 'About' page for an example of a cell background (the sunset image) which also does not resize as the page width decreases.

Settings for both pages in the attached zip file.

Playing about with this to see what is going on, I have the impression that perhaps WX5 will stretch a smaller image to fit the larger viewport but not vice versa. Is this correct, and am I expecting it to do something it doesn't, i.e. scale down a larger image?

Although, I had a look at the home page on the Chalet template for another example and that does scale down the page background image, at least at the first breakpoint. Though I haven't yet worked out how it does it, which might be an option if I can repeat that behaviour at smaller sizes.

Malcolm

Ler mais
Publicado em de Malcolm P.
Aleksej H.
Aleksej H.
Moderator
Usuário do mês RU

As far as I know, without changes in CSS you cannot do what you want.Try this for the main page:

#imPageExtContainer {
background-size: contain;
}

And this is for the About page:

#imPageRowGraphics_1 {
background-size: contain;
}

How to insert it can be found here.

Ler mais
Publicado em de Aleksej H.
Esahc ..
Esahc ..
Moderator

Malcolm & Aleksej, in step 2 Template Structure, why not replace the page background image with a resized/renamed image appropriate for each resolution?

Ler mais
Publicado em de Esahc ..
Malcolm P.
Malcolm P.
User
Autor

Aleksej, thank you for the suggestion but I was unable to get this to work on either page. I am not very familiar with the use of custom code so may simply have misunderstood your instructions (code inserted in the Expert section, Before closing the HEAD tag). Was there anything else I needed to do?

Esahc, although your suggestion is fine in principle, it fails in this instance as the background image on the Home page is unique to that page. Using step 2 Template Structure as you suggest also applies the same image to all the other pages where it is not wanted. With some individual tweaking it might perhaps be possible to hide the unwanted background(s) behind other foreground elements so that it is invisible except on the Home page, but in a quick test there was still a background border showing behind the gallery object on the Gallery page.

It is unfortunate that, on the image the client had chosen for the Home page background, the Smartphone view defaults to a crop showing just part of the roof and the chimney of the studio. In fairness, I agree that is less than ideal, but the problem is compounded by the fact that she also has severe OCD and obsesses about the tiniest and most trivial details to the exclusion of the larger picture. At the moment she is hung up on everything looking absolutely perfect on an iPhone and exactly as it does on a full-size screen (which may well be impossible simply due to the physical constraints). If there is any way of giving her what she wants, or maybe something close, that would at least remove that objection.

Ler mais
Publicado em de Malcolm P.
Esahc ..
Esahc ..
Moderator

Malcom, you can always use page properties, graphic to replace the background for every page except home page?

Ler mais
Publicado em de Esahc ..
Esahc ..
Esahc ..
Moderator

My tests (sorry, I tried to attach an example project, but the iwzip is a tad too big)

Ler mais
Publicado em de Esahc ..
Malcolm P.
Malcolm P.
User
Autor

Many thanks, Esahc, I hadn't thought of doing it that way. I'll give it a go and let you know the results.

Malcolm

Ler mais
Publicado em de Malcolm P.
Malcolm P.
Malcolm P.
User
Autor

Hi Esahc,

I've now tried your suggestion and that part works as you say providing the image is set to 'Do not repeat', so thank you for that. Unfortunately it also appears to have major unintended consequences for the remainder of the page formatting, with the background showing through in some places but not others and some of the effects apparently no longer working. It may be possible to rectify the formatting with careful adjustment of both the image size and aspect ratio and also the individual template structure elements at every resolution, but that will require a lot of tweaking and testing and even then I suspect that one of the non-standard Apple/iPhone screen resolutions may still break it unless I add further breakpoints for those. Unfortunately I'm in the middle of other urgent work at the moment and don't have the time for the necessary exhaustive tweaking and testing to catch every possible combination.

As an aside, can you explain to me why, when I enable the custom settings in the Page Properties/Graphic section, the page background when set in step 2 as above is then completely obscured even with the Color set to transparent? With custom settings disabled it becomes visible again. If I set the set the custom settings to either a solid colour or another image, that colour or image shows as expected, but Color = transparent seems to have no effect, i.e. it seemsto add a white background instead.

Very many thanks for your efforts to assist with this.

If anyone has any other suggestions or even just confirmation that what I am trying to achieve is impossible without extensive custom code so that I can simply go back to the client and say 'No', that would be very helpful and also much appreciated.

Malcolm

Ler mais
Publicado em de Malcolm P.
Esahc ..
Esahc ..
Moderator

Malcolm, shortly after my post I lost internet so am forced to use a mobile. I will reply tomorrow (my time) when all is well with my world. I am absolutely sure what your client wants can be achieved.

Ler mais
Publicado em de Esahc ..
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuário do mês IT
Malcolm P.
... ... ...  If anyone has any other suggestions or even just confirmation that what I am trying to achieve is impossible without extensive custom code so that I can simply go back to the client and say 'No', that would be very helpful and also much appreciated. ... ... ... 

(It >  En) ... excuse me, maybe I didn't understand, and if you ignore how much I'm going to say ...
... for me it is possible in simple EXTRA ...
... if you're interested in having a smartphone too  the background of the page with a fixed image, resize-ratio + CSS-COVER, ... then in EXTRA you could use an exclusive code of mine invented by me ...
... so if you are interested, let me know, so I'll try to study your page, and then offer you my adapted code ...
... in the end it will be very easy to insert the code in the project with a simple copy / paste in the "Expert" panel ...
... if you don't care, ignore what I said ...wink
.

ciao

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Aleksej H.
Aleksej H.
Moderator
Usuário do mês RU

"Was there anything else I needed to do?" - Go to the page properties and do this:

Ler mais
Publicado em de Aleksej H.
Malcolm P.
Malcolm P.
User
Autor

Aleksej, Esahc and KolAsim:

Firstly, thank you all for all your efforts and suggestions to resolve this. I would still like to know for future reference if there is a simple solution to this, but the problem is now no longer urgent as I have this morning sacked this particular client after discovering that she has been dealing with someone else behind my back and has given him direct access to the hosting server, and further that she has been very critical and dismissive of the work I have done for her on this site to date. There is clearly no point in continuing a working relationship under those circumstances.

Just to tie up the loose ends here:

Esahc: if you have any further suggestions or wish to investigate further out of interest I would be very pleased to hear them, but please don't waste your time unnecessarily.

Aleksej: I had tried inserting the custom code exactly as your last post but the Home page background still does not resize in the smaller viewports. Is there another setting I may have missed elsewhere, perhaps?

KolAsim: Thank you for your interest, but under the circumstances I feel there is little point in you spending time on this now. If a similar issue crops up on another project, perhaps I may get in touch then?

Once again, a very warm thank you to you all for your willingness to get involved and offer support.

Kind regards,

Malcolm 

Ler mais
Publicado em de Malcolm P.
Esahc ..
Esahc ..
Moderator

Malcolm - sorry to hear that your client was never going to be pleased with your efforts. 

I did look into the transparency setting and agree that if it worked it would effectively turn off "enable custom settings" so it is a bit futile. Transparent should not exist as an option (although opacity would be nice if enabled)

I will do no further work, but there are many ways to achieve what you require for the sunset photo. The most successful will probably be achieved by using the "extend" option in step 4. I have used this with both an image in a text box (handy for a slide show) and an image object. If you get the dimensions correct on the original image it will resize nicely for every resolution. Having said that, row formats and cell style also offer options.

There is also a place for custom code - I only try and avoid it because I frequently forget it is there (especially on projects/websites that I have not needed to revisit for years).

Ler mais
Publicado em de Esahc ..
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuário do mês IT
Malcolm P.
... ... ... ...  KolAsim: Thank you for your interest, but under the circumstances I feel there is little point in you spending time on this now. If a similar issue crops up on another project, perhaps I may get in touch then? ... ... ... 

(It > En) ... OK ... wink
... when you need a FullScreen background that remains fixed even in smartphones, you post your LINK.   and open a new Topic, which perhaps I will pass to see...

ciao

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Aleksej H.
Aleksej H.
Moderator
Usuário do mês RU

"Aleksej: I had tried inserting the custom code exactly as your last post but the Home page background still does not resize in the smaller viewports. Is there another setting I may have missed elsewhere, perhaps?" - Try clearing your browser’s cache.

Ler mais
Publicado em de Aleksej H.
Malcolm P.
Malcolm P.
User
Autor

Aleksej: Just to confirm that your code does work exactly as required in that respect, thank you; I was missing a <style> tag in my first attempt. Good to know for the future.

There is then a consequent issue with only a narrow section of the background being visible on a mobile, although frustratingly it previews correctly in WX5. I suspect that is most likely connected with the upper and lower margin settings of the foreground elements and is something I need to look into further, purely for my own satisfaction now. Similarly with your other code for the 'About' page and others.

Esahc: thanks for your further suggestion about using the 'extend' option for the other pages, and I'll have a further play with that when I have more time.

Malcolm

Ler mais
Publicado em de Malcolm P.
Aleksej H.
Aleksej H.
Moderator
Usuário do mês RU

"Aleksej: Just to confirm that your code does work exactly as required in that respect, thank you;" - I am glad.smile

"I was missing a <style> tag in my first attempt. Good to know for the future." - That is why I wrote: "How to insert it can be found here.". wink

Ler mais
Publicado em de Aleksej H.
Malcolm P.
Malcolm P.
User
Autor

I am duly both humbled and wiser! embarassed

The subsequent issue with the partially obscured background on a smartphone appears to be a function both of fixed backgrounds not working on a mobile, as I understand from another post, and the way WX5 orders objects in that viewport. I haven't had time to experiment further to see of the latter can be overcome by re-ordering or deleting certain objects in that view.

Fortuitously, the replacement background image the client wanted before I ceased further work on the project doesn't look as bad on a mobile as the original when cropped, so I've left it alone. Any further work I do on that one will be for my own learning only.

Ler mais
Publicado em de Malcolm P.