I have finished two webpages with almost identical templates. The pages have the backgrounds defined by morepagedata plugin. On desktop (regardless if Windows or iOS) the background are OK. On android smartphones they are fine as well. On iPhone, however, the background leaves an empty space on the top while in potrait. There are some comments on the net. But none of the hints works and I don't know how to position the background properly top.
Have a look at http://rancdubina.sk or http://svadbavprirode.sk
Background on iPhone
Moderator: mikey
Background on iPhone
You do not have the required permissions to view the files attached to this post.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.
Re: Background on iPhone
Extending the previous morepagedata code in template toseems to solve one point - the background is now positioned correctly. The othe thing is that the background is not responsive now and its content is thus hardly readable. the background image is
Code: Select all
<style type="text/css">
<?php
if(isset($background)) { echo '#content {
background:url(' . $pth['folder']['template'] . $plugin_cf['morepagedata']['path_template_images'] . $background . ');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
height: 100%;
width: 100%;
}'; }
?>
</style>
You do not have the required permissions to view the files attached to this post.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.
Re: Background on iPhone
Usually, the standard property (in this case background-size) is defined after the vendor-prefixed properties, so that the standard property will be preferred, if supported. (In this case I don't know, though, if it makes a difference, and whether the vendor-prefixed rules are necessary, anyway.)Tata wrote: ↑Sat Mar 24, 2018 5:03 pmCode: Select all
background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;
Have you tried other values for background-size? See https://developer.mozilla.org/de/docs/W ... round-size for what's supported.
Christoph M. Becker – Plugins for CMSimple_XH
Re: Background on iPhone
Well, the background-size: auto; worked good. But background-attachment: fixed; and background-position: top; are ignored and the background scrolls with the page. It's OK on small pages. But it doesn't look nice on larger pages.
Cann it be that the background scrolls because it's defined by morepagedata for the actual page?
Cann it be that the background scrolls because it's defined by morepagedata for the actual page?
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.