CODEWITHSUNDEEP
iphoneioscssbackground-imagefixed
Leopold Kristjansson
Leopold Kristjansson

Reputation: 2784

Fixed background img not working properly on iPad and iPhone

I have a couple of problems regarding background images in Safari on ios (iPad/iPhone). Everything works fine on regular browsers. The image is supposed to be fixed and fill the screen.

  1. On ios-safari the background image is shown and stays fixed in the back. However the height of the image is set by the content height somehow. Meaning when I have little content on the page the image is displayed correctly, but when I have long content I can only see the top of the background image (the image gets stretched but keeps the correct ratio).
  2. The js code for switching out the background images does nothing on ios-safari.

Here is my html

<html>

<head>
    Some head stuff
</head>

<body>

    <div class="pagewrap">

        <header class="header">
            <div class="menu">
                Some header stuff
            </div>
        </header>

            <div class="full-page-background fullheight"></div>

        <div class="wrap">

            <div class="main">
                Some content
            </div>

        </div>

        <aside class="sidebar">
            <nav class="mobnav">
                My mobile nav
            </nav>
        </aside>

    </div>

    <div class="custom-background">
        A placeholder for a custom background image
    </div>

</body>

</html>

Here is the css for .full-page-background

.full-page-background {
    background: url(/Content/Vixen/img/background02.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:top center;  
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    position: fixed;
    width: 100%;
    z-index: 1;
}

Here is the js for .fullheight to make sure it fills the height of the browser window.

$(document).ready(function() {
    var bodyheight = window.innerHeight ? window.innerHeight:$(window).height(); 
    $(".fullheight").height(bodyheight);
});

// for the window resize
$(window).resize(function() {
    var bodyheight = window.innerHeight ? window.innerHeight:$(window).height(); 
    $(".fullheight").height(bodyheight);
});

Here is the js for .custom-background - if there is a image in the div (placed by the user in the cms) it switches the default image for the new one. Works well on desktop but does nothing on ios-safari.

$(".background-image").each(function() {  
    imgsrc = this.src;

    $('.full-page-background').css({
        background:'url(' + imgsrc +') no-repeat fixed center center / cover  transparent'
    });
});

Upvotes: 1

Views: 9131

Answers (1)

Leopold Kristjansson
Leopold Kristjansson

Reputation: 2784

I found this plugin here:

http://srobbin.com/jquery-plugins/backstretch/

It seems to work well for full-size background images on all devices (all that I have tested that is!). Which includes Safari on ios.

Upvotes: 1

Related Questions