How to get background to be responsive in Divider template?

[dnlyko]

Something strange...
The background is adaptive when viewing on my PC. I can change the browser to any size and the site including the background is adaptive.
When I view it on my iPad, iPhone 6Plus or Nokia 1520 phone, the background is not adaptive. But when I view it on my Alcatel Idol 4s, it displays properly.

[dnlyko]

smoothruler.com

[Pablo]

Related topic:
viewtopic.php?f=5&t=84661

[dnlyko]

Related topic:
viewtopic.php?f=5&t=84661

This does not provide a solution.

Only have 1 page on site.

I can't understand why the page displays properly (completely responsive) on a PC at any and all resolutions.
Everything displays properly (completely responsive) on all devises except the background

[Pablo]

I'm sorry, but I do think the topic is related.
Did you try the suggestion?

I can't understand why the page displays properly (completely responsive) on a PC at any and all resolutions.

The issue is related to the way browser handles 'overflow' as mentioned on the other topic.

The 'slant' divider you are using sets the width of the slant to 150% which causes the slant to be wider than the viewport.

[dnlyko]

Yes I tried all suggestions including adding the "html{overflow-x:hidden;}" to the bottom of index.css

[Pablo]

Did you refresh the browser cache?

[dnlyko]

Yes

[Pablo]

In that case, I think it's related to the parallax or fixed background. On the iPad/iPhone this does not work in combination with 'cover'.
See 'known' issues':
https://caniuse.com/#search=background-size

There are two things you can try:
- if you use breakpoints, select a different background mode for smaller sizes
or
- in the page properties -> advanced -> Enable safari background fix.

[dnlyko]

no breakpoints just the template

already tried that to no avail

[dnlyko]

http://www.mpwebsites.nl/ works fine

[Pablo]

Then maybe the image format is not correct?
Does it work with te standard images form the template?

[dnlyko]

it's just a jpg and works fine elsewhere.

i guess that template will not work with the page having an image as a background.

i was hoping to build a simple single page responsive page website and that is what my customer paid me for.
i have now lost so much time on this.
i will just start from scratch and build it like i did with mysnapsonline.com and have 6 or 7 breakpoints.

[Pablo]

Based on the HTML code, I cannot see what you have done exactly, so I can only guess. That is why it's always better/faster to provide a (stripped) copy of the project file.
Related FAQ: viewtopic.php?f=10&t=82134

Unfortunately, there are some things I do not have control cover like cover and fixed not working on some mobile devices, and that is why the software includes workarounds where possible.
Until now they have worked for other users, so I'm sure it can also work for you.

[dnlyko]

just use the template and add a picture as the page background and you will see the code

[Pablo]

The template works for me:
http://www.wysiwygwebbuilder.com/suppor ... iders.html

[dnlyko]

I have built 2 successful sites using WYSIWYG
Both are .wbs file format
The template for 'dividers is .wtp
Am I using the correct template?

I re-downloaded the template this morning and opened the .wtp file and...
left clicked on 'More Properties' bottom right
left clicked on 'Style' tab
changed 'Background' / 'Mode:' to image
selected my image in the 'Image:' browse field
selected cover option
pressed OK
changed page name to index
published to server

and of course it does not display correctly as described in my first post in this thread.

Please, what am I doing wrong?

[Pablo]

standard projects are in wbs format
template are in wtp format. wtp files include images and other fiels so it can be more easily transferred to another computer.

As previously mentioned, Safari does not support fixed+cover.
This is documented here (unrelated to WWB) https://caniuse.com/#search=background-size

But is this what you are looking for?
http://www.wysiwygwebbuilder.com/support/smoothruler/

[dnlyko]

Yes, that is exactly what i’m trying to achieve.

I don’t think it is a Safari issue but an IOS issue.

I use Chrome, Firefox, DuckDuckGo and Edge on my Apple devices and the issue appears on all those browsers.

I don’t have any Android devices to view my web projects

[Pablo]

Does my example work for you on those devices?

Here's what I did:

Step 1
open the divider template

Step 2
open the page properties:
- mode: image
- image: tribute-small.jpg
- do not repeat
- alignment center center
- size: cover

Step 3
remove the background image from: home , banner1, banner2, banner3

Step 4
in page properties -> advanced -> use safari mobile background fix

Also, make sure you have the latest update of the software (14.3.4)

I use Chrome, Firefox, DuckDuckGo and Edge on my Apple devices and the issue appears on all those browsers.

On iOS, all these browsers use the same browser engine = safari/webkit.

[dnlyko]

Hello Pablo
On a brand new wbs project, empty index defalt page …
What exactly are the steps to get a background image?
I follow the above steps but no background image appears on Preview in Browser

[BaconFries]

To insert a image:
Page Properties->Style->Background and select image from the drop down then in image browse to were the image is and insert.
If the image doesn't display it is due to it having a invalid name.
See the following:
viewtopic.php?f=10&t=131

[dnlyko]

Thanks, invalid name it was.