1

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? 

body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: url(../img/background.jpg) center repeat-x;
    background-size: auto 100%;
    background-attachment: fixed
}
Josh Hunt
  • 13,737
  • 26
  • 75
  • 98
user852974
  • 2,202
  • 10
  • 39
  • 64
  • 1
    I believe your question was discussed here >> http://stackoverflow.com/questions/9779195/does-a-background-attachment-of-fixed-work-in-ios5 – SULTAN Mar 27 '14 at 23:23

2 Answers2

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>
    <div class="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...

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

        ResizeWindows();

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

    function ResizeWindows() {
        //  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...

Mike Gledhill
  • 25,874
  • 6
  • 141
  • 151
  • It's... something that works. +1 for that. -1(@Apple iOS) for this still happening in 2020 with CSS that's valid for *every* other browser – TCooper Mar 07 '20 at 00:18
0
body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: url(../img/background.jpg) center repeat-x fixed;
}
Eligreen
  • 62
  • 10
  • 1
    Could you provide an explanation? Currently your answer is incomplete. – bjb568 Mar 28 '14 at 00:19
  • The fixed property be placed on the same line in the background, could also add another parameter such that the image Top start at position 0 for example background: url(../img/background.jpg) center top repeat-x fixed; because the parameter center is the first parameter this is for X Plane – Eligreen Mar 28 '14 at 12:45
  • It should be in the answer. – bjb568 Mar 28 '14 at 16:02