Skip to content Skip to sidebar Skip to footer
Home / Background Image / Css / Html / Ios / Stretch

Css Background Stretches To Fill Screen On Safari But Not On Ios

Post a Comment
This CSS successfully stretches my background image to fill 100% of the screen area and not scroll on safari but not on iOS. How can I also prevent the image from scrolling on iOS?

Solution 1:

I gave up trying to get my iPhone to play nicely with CSS, and had to resort to using jQuery.

In my webpage, I added a <div> which I want to fill the screen:

<body><divclass="cssFullScreen" />
    ...etc...

Then I added in two tablespoons of CSS...

<style>.cssFullScreen
    {
        position: absolute;
        left:0px;
        top:0px;
        background: url(BackgroundImage.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
</style>

..and a reluctant scoop of jQuery...

<scriptsrc="jquery-2.2.3.min.js"></script><scripttype="text/javascript">
    $().ready(function () {

        ResizeWindows();

        $(window).resize(function () {
            ResizeWindows();
        });
    });

    functionResizeWindows() {
        //  When the user resizes the window, we'll resize any DOM elements//  with the "cssFullScreen" class.var width = window.innerWidth ? window.innerWidth : $(window).width();
        var height = window.innerHeight ? window.innerHeight : $(window).height();

        $(".cssFullScreen").width(width);
        $(".cssFullScreen").height(height);
    }
</script>

It's not pretty, but it was the only thing I could find which really worked on an iPhone.

And strangely, this code only worked (on an iPhone) when applied to a div. If I tried to apply it directly to the html or body, it did nothing...

Solution 2: 

body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: url(../img/background.jpg) center repeat-x fixed;
}

Post a Comment for "Css Background Stretches To Fill Screen On Safari But Not On Ios"