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
  • 14,225
  • 26
  • 79
  • 98
user852974
  • 2,242
  • 10
  • 41
  • 65
  • 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

3 Answers3

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
  • 27,846
  • 7
  • 149
  • 159
  • 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
0

I ran into this issue and it is realated to position: fixed. Here was my workaround.

Take the background off the body and put it in its own class.

.bg-pulsing-gradient {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: linear-gradient(58deg, #ffffff, #ffffff, #ffffff, #FAF4CF, #F5EA9F, #ffffff);
  background-position: bottom left;
  background-size: 200% 150%;
  animation: pulsingGradient 15s ease infinite;
  background-repeat: no-repeat;
  z-index: -1000; // send to back
}
@keyframes pulsingGradient {
  0% {
    background-size: 200% 150%;
  }
  50% {
    background-size: 150% 150%;
  }
  100% {
    background-size: 200% 150%;
  }
}

Just after the <body> tag add a the bg class to a single div.

...
<body>
  <div class="bg-pulsing-gradient"></div>
...
</body>

The position: fixed along with the width, height, top, left will create a sticky box behind all your content. The css background will stay within that box.

This works on iOS and Desktop.

Mot
  • 48
  • 6