Page 1 of 1

Background on iPhone

Posted: Sat Mar 24, 2018 1:45 pm
by Tata
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-ios.jpg
background-ios-2.jpg

Re: Background on iPhone

Posted: Sat Mar 24, 2018 5:03 pm
by Tata
Extending the previous morepagedata code in template to

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>
seems 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.
background-ios-4.jpg
the background image is
background-ios-5.jpg

Re: Background on iPhone

Posted: Sat Mar 24, 2018 5:43 pm
by cmb
Tata wrote:
Sat Mar 24, 2018 5:03 pm

Code: Select all

            background-size: cover;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
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 pm
The othe thing is that the background is not responsive now and its content is thus hardly readable.
Have you tried other values for background-size? See https://developer.mozilla.org/de/docs/W ... round-size for what's supported.

Re: Background on iPhone

Posted: Sat Mar 24, 2018 6:22 pm
by Tata
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?