Background on iPhone

Please post the URLs to pages, where you've made a CMSimple template available for download

Moderator: mikey

Post Reply
Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Background on iPhone

Post by Tata » Sat Mar 24, 2018 1:45 pm

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

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Background on iPhone

Post by Tata » Sat Mar 24, 2018 5:03 pm

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

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Background on iPhone

Post by cmb » Sat Mar 24, 2018 5:43 pm

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.
Christoph M. Becker – Plugins for CMSimple_XH

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Background on iPhone

Post by Tata » Sat Mar 24, 2018 6:22 pm

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

Post Reply