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?

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

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.

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

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.

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

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

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

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

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.

(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 ...
.

ciao

.

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

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 

(It > En) ... OK ...
... when you need a full-screen wallpaper that remains fixed even in smartphones, you publish your LINK. and you open a new topic, and let me know, maybe I'll see ...

ciao

.

"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.

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

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

"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.".

I am duly both humbled and wiser!

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.

This issue was never fully resolved on the original project, and has now returned to bite me on a new project for a new client.

Aleksej's code (above) works perfectly for resizing the background to the window width, but the problem now is that the height of the background image also reduces accordingly so that on a smartphone screen, where the bottom of the image should appear as the foreground object (text with solid white background) scrolls up the screen, there is simply a large blank space below this object.

If I attempt to compensate by using a portrait-mode background the problem is reversed, in that the height then controls the resizing so that the background is then too narrow at wider viewports.

The frustrating thing is that it appears to work OK in the smartphone viewport on the editing PC but fails on an actual iPhone/Android phone, no doubt due to the different way in which the phone handles the background. (There are also some spacing/formatting issues at the smaller size but these can probably be mitigated by careful adjustment of the margins of the various elements.)

If Aleksej's code is not used to resize the background, this simply appears excessively magnified and blurry on a smartphone, so that is also unsatisfactory.

Does anyone have a further solution or suggestions for this please, otherwise I cannot see how to make it work acceptably on a smartphone without a complete redesign? I'm rather surprised this issue hasn't come up previously.

For the moment I have removed the resizing code from the (live) site as it is otherwise working satisfactorily on laptops etc, but I can reinstate this temporarily and post a link to the site if necessary for an examination of the issue. Although the behaviour should also be observable on any similar template, e.g. MyRosemary.

Many thanks in advance for any further help.

(Mods: if you think this should be a new topic for clarity, please move or advise.)

Malcolme, my apologies if I get anything wrong (no access to PC, mobile phone only)

You can set background colour and image for a cell, but even if you use an alternative approach, feathering the bottom of the image to a suitable colour would provide a better user experience.

(It > En) ...!... if you were interested and if you warned me, as I said > here, maybe you could have solved two months ago...
... so if you still care about the fullscreen background even in your smartphone, tell me, so I'm going to study your page, if it's always > this, ..to see if it's possible to apply my exclusive EXTRA invention...!...

.

Esahc, thank you for those suggestions and I may have to use those as a workaround if I can't find another solution with the existing design. I shall look again at the various options in more detail later today once I've cleared some other work out of the way.

KolAsim, thank you for your further interest. It didn't seem fair to waste any more of anyone else's time two months ago after I had ceased work on the previous site and terminated relations with the client. I have no further involvement with that original site pending a rewrite by someone else, although I believe my site is currently still up.

It would however be very useful to have a working solution, both for my new client and for future reference.

If you would like a look at the new site that is the subject of my latest post, it's at oldrectorystretton.co.uk. This only went live yesterday afternoon so is unfinished in a few places and probably still has a few rough edges. The site at present does NOT incorporate Aleksej's code for resizing the background so is straight out of WX5 without any custom additions or modifications.

Very many thanks, as ever.

...OK! ... ... I'm going to see what it is, ... and then I'll let you know if you can apply my invention ...

.

Hi Malcolm,

Some time ago I wrote a JavaScript routine which works the way you are looking for.

Here is the sample.

...  ... ciao

KolAsim: THANK YOU SO MUCH!!! That is brilliant and appears to be exactly what is needed. Tested on my smartphone so far from the WX5 preview, and I'll upload it to the live site for final testing when I've done the other pages.

Will it also work on an iPad, or is it specific to smartphone resolutions? I don't have any sort of tablet here to try it on, I'm afraid.

For interest, can you explain in overall terms at least what the script is actually doing? My coding knowledge is insufficient to read it, but I like to have some idea at least of how things work.

Tom G: Thank you very much also, and your sample link also works perfectly on my smartphone. I would also like to try your JavaScript routine; would you be happy to share the code for that?

I am more than grateful to you both, and to anyone else who has helped with this or other issues in the past. The support on this forum is incredible and adds substantially to the value of the software.

Best,

Malcolm

... you have to try, but I think so ... ciao...

.

ps: ... my code is one of my exclusive ideas ...
... hides the original background and replaces it by injecting a div_custom ...

This is what I am using - it's a modified version of original KolAsim's code. (See attachment).

Paste it in the section:

>> Step 3 - Map > Properties > Expert | ▪Custom Code: > ▼Before closing the HEAD Tag

I hope this is what you are looking for. For me - it works.

Tom, thank you for your generosity in sharing. I have tried both yours and KolAsim's original code, and for this particular site the original code works better. KolAsim's code somehow allows the background to remain visible at the bottom of the screen as the foreground elements scroll up, while with yours (as designed) the background correctly resizes to the screen width but is fixed in one position and becomes obscured by the scrolling foreground.

KolAsim, your original code works beautifully for this site but with one limited but unfortunate side-effect. The Contact page has a text object to the left with the Address and Enquiries information and a Google Maps object to the right. With your code added to the page, the map object simply vanishes and the text object extends full width. The page reverts to normal when the custom code is removed.

If I replace the map object with a simple image, the page works as expected. I can't see any settings that might affect this; am I missing something obvious, or is there an easy workaround that would allow the map object to function or a live Google map to be otherwise displayed?

Thanks again to you both.

Hello Malcolm

It is maybe because the Google-map don't like to be "wrapped in".

Try to set a background color for the map. If is is visible then the object IS there-  you may have to make the map as an iframe where you use the embed as parameter. This will also function without the need for an API key. 

I have made an example here : http://bramminginfo.dk/side-17.html

The mailform is the "normal" object.

The map is made via an iframe :

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2248.77702854352!2d12.597086716044627!3d55.69286420408044!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x464c90eb8d422103%3A0xdfa8900ca2351e3c!2sDen%20Lille%20Havfrue!5e0!3m2!1sda!2sdk!4v1568889597024!5m2!1sda!2sdk" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>

This is functioning - and the background(s) is responsive. It is made much the same way as KolAsim's code.

The images in my example is not optimized for this purpose.

The "shift-able" images are 1000 x 563 and with a size of 150 - 190 Kb 

(It > En)  ... no, my code does not affect the map ...
... you have hidden the map below the 960px breakpoint ... (see attached STAMP)...
... then, or regularize the objects in the project, the right step to do, or always act with simple extra code:
<style> #imCell_3 { display: block;} </style>
... you must delete this EXTRA code you entered in HEAD:
<style> #imPageExtContainer { background-size: contain;} </style>  ...!...

...!... to check; it seems to me that the pulsanre [I agree] does not work...

ciao

.

John S: Thank you, and also for the example. You're correct: if I add a coloured background to the map object, that does appear (but not the map itself). An iframe using the code from Google Maps works; is there any disadvantage in using that method? I seem to recall that not every browser is happy with iframes?

KolAsim; the extra code in the HEAD was left over from when I had originally tried out Aleksej's code (in Step 2, Statistics, SEO and Code, and shouldn't have been there. Thank you for spotting that before it caused any further problems, and now removed.

(Apologies to Tom G. if that was also affecting the operation of his script at the time I tried it and potentially makes my previous comment invalid.)

Your additional code snippet <style> #imCell_3 { display: block;} </style> reveals the map again but also appears simultaneously to disable the background sizing on that page, unless I have inserted it incorrectly (which is far from improbable). It looks as if an iframe might be the simplest solution, unless I've screwed up with the code?

Apologies for my ignorance, this is my first real encounter with direct coding which, while both interesting and valuable, is currently still somewhat above my pay grade.

Thank you also for the note on the 'I agree' button; I haven't experienced any problems with that not working so far but will check it out again thoroughly just in case.

... to check, I don't see the suggested changes for the "contact" page ...

ciao

.

@Malcolm - don't be afraid to use iframes. All/most modern browsers can handle them.

They can be very handy. Look at this page http://bramminginfo.dk/museet.html   where I have 2 iframes. In the upper iframe, the content can be changed by clicking the links under the iframe.

Both iframes is made responsive - and the height is adjusted automatically to match the proportions of the iframe. Take a 360 degrees tour - try to resize and see how the iframe and the content follows the resizing.

Often a container is a better solution than an iframe - but iframes are rather easy to handle.

KolAsim: I had changed the source file but hadn't actually uploaded the revised site when you checked! The latest version is now online.

John S: Thank you for the link - that looks good. I have changed the map to an iframe and that appears to be working fine so far, pending further exhaustive testing. I shall look into that further when I have time.

A couple of side issues have come up in testing on a mobile and tablet, and I wonder if anyone has noticed either of these while looking at the site? I'll raise a new dedicated topic for those if so.

(1) The client reports that operation of the hamburger button is 'erratic', in that it sometimes brings up the menu and at other times does not respond. I had found the same issue when testing with the native Samsung browser on my mobile, though it usually worked after refreshing the page. Google Chrome on my mobile appears to work fine. Additionally, occasionally one or more elements are missing when the page is initially opened, suggesting in both instances that it may not be loading fully the first time.

(2) The client says that the formatting is somewhat broken on a tablet, though he admits that it's a rather old iPad and may be running an unsupported browser, which I know can cause problems and may also be related to (1) above. He didn't report any problems on a recent iPhone yesterday after I had sorted out the background resizing problem, so hopefully it's either that or possibly an issue with the iPad using a non-standard resolution.

I've asked him to check the latest version again on both his iPhone and iPad.

... OK, now it's correct and regular ... ciao......

... note: ...the map used in the program, as you could see from my STAMP, is already in IFRAME ...
... for other different questions, you need to open new dedicated topics, and if this is solved, you can close it ...

.

Please, disregard the attachment above - wrong version of the project...

Sorry!

... I deleted your post ...

Thanks, KolAsim!

For those interested, here is the page on which you can see the background that changes depending on the screen resolution. An image becomes bigger or smaller.

Here is the project’s structure, just plain "HTML Code" object with no code in it:

The attached code past into: >> Step 3 - Map > Properties > Expert | ▪Custom Code: > ▼Before closing the HEAD Tag

(It > En) ...hello Tom, thanks to you, and I appreciate your interest and commitment ...
... depending on the uses, for the "resize-ratio"  the width="100%"  attribute is sufficient, ... one of my first suggestions since 2004 ...
... the examples are worth more than a hundred words:
... see > basic example;
... see > example super 1 (*);  (media-Query)
... see > example super 2 (*);  (HTML5-picture)
... see > example super 3 (*);  (JavaScript)

(*) - [image change on screen resolution (mobile-desktop)]

Hello, ciao, and enjoy experimenting.........

.

Thank you, KolAsim!

Your examples are really great! You should post a list of such experiments!

Do you have a web page where we could access them (like "afsoftware.fr" has)?

... ... currently unfortunately not!
... I'm a little bit here and a little beyond in the various Topic ...

ciao

KolAsim: I'm sorry to have to ask again for your assistance, but unfortunately I still need some further help to resolve what is hopefully the final piece of the puzzle.

I have reverted back to the Google Map object on the Contact page, as using a separate iFrame with the Google code appeared to be interfering with the operation of the hamburger button and the sticky bar on that page particularly. I believe that has now most likely fixed that issue.

However, it seems that anything that addresses the original problem of the invisible Google Map object interferes with the operation of your code for resizing the background. I have tried everything and anything I can think of to work around this, including relocating the Map object to its own line and also various alternative parameters to your additional #imCell_3 { display: block;} code above, but have not found anything that permits simultaneously a visible map and a correctly-sized background. Oddly, if I simply replace the (invisible) Map object with a simple image object, that image is then immediately visible with the resized background and without any further messing about.

It is entirely possible that I may have either the structure or the syntax of the code incorrect, but I think I have tried just about every possible permutation without success. I would be extremely grateful for some further idiot-proof guidance, if you would be so kind.

Very many thanks.

(It > En) ... ... my code used correctly does not interfere with the google map ...
... now you have changed directly in the project; ... the map is no longer #imCell_3 (!),  but now it is #imCell_18, and it works regularly, without the need to use codes ...
... but you missed the SCRIPT code; at the end of the code you must delete this string:
  #imCell_3 { display: block;}  
... the SCRIPT code you must use it without making changes; you can only correct the URL of the background image ...

.

ciao

.

@KolAsim:

Apologies, but despite trying everything I can think of I have still been unable to get this to work correctly (response delayed as this project has been on the back burner since your last reply, pending integration of the booking and payments system and other work).

1) With your code added to the Contact page, the background resizes correctly but the Google Map object is no longer visible.

2) With the code removed, the map object is visible but the background does not resize.

3) With your code present and the Google code for the location embedded directly as an iFrame instead of the map object, the map is visible and the background resizes, but the hamburger button does not work (or works only intermittently).

4) Your code also currently prevents the embedded booking form on the bookings page from appearing correctly, which I assume is a similar issue to the Google Maps object. The form is embedded as html and should appear below the temporary warning in red at the bottom of the main content on the page https://www.oldrectorystretton.co.uk/bookings.html (it is there in the correct position on the page but is not currently visible while your code is included).

Is it simply a matter of defining the correct #imCell_ in each instance as per your last post? Though I thought I had tried that previously but without success.

I would be exceptionally grateful if you are able to assist further with this as the site is about to go fully live for business and this is the only remaining glitch. Unfortunately I am completely out of my depth at this point!

Very many thanks in advance.

Malcolm

(It > En) ... remove my code, and you put the link of the pages without extra code to check, so that I can evaluate ...
... then I will give you to let you try it, another code of mine alternative to the previous one ...
... let me know when I can go check ...
.
bye bye

Thank you KolAsim - your assistance with this is very much appreciated.

Code now removed from the bookings and contact pages - the page links are https://www.oldrectorystretton.co.uk/bookings.html and https://www.oldrectorystretton.co.uk/contact.html
respectively.

Malcolm

Hi. Use the new Content Slider Object and with very few lines of code make photos and texts responsive (you can also delete texts) and solve the problem. This is the link of my example:

http://www.bozzasito001.altervista.org/cityfitness/

My extra code is indicated with the comment /* Custom code by Giuseppe Guida */ and you see it doing Ctrl + U on the preview of my template. Be careful to identify the correct ID of your item and replace it with the one in my custom code.

Use photos of size 1920x1600 px.

Hi

(It > En)  ... OK! ...... thanks for the test ......
... in the bookings and contact pages this last my code works perfectly on my Android SmartPhone ...

bye Bye

ciao

.

@Guiseppe. Many thanks for that - it looks good, and I'll have a play later on a copy of the site and see if I can get my head around it all. I'm not about to change the live site just now as it's now working and fully operational for business, barring a few minor mostly cosmetic tweaks and additions, but it's something I can potentially run past the client in future.

@KolAsim. Thanks once again - I couldn't have done it without you!

Special thanks to the giants on whose shoulders we mere mortals stand, and also to everyone else who has pitched in with help and suggestions during the course of this thread, and I hope others may also find it useful.

Best,

Malcolm

... grazie anche a te, ... ciao ...  ...

.

Malcom P.

Ciao