8

I've used the following CSS to ceate a fixed body background. It works well on almost all browsers except the new iOS7. On the latter the background is not fixed anymore. It scrolls with the page. Any idea how to fix the problem?

    body {
       background-color: #000; 
       background-image: url('../pics/backgrounds/blackWhite.jpg');
       background-repeat: no-repeat; 
       background-position: center;
       background-attachment: fixed;       
       webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover;     
    }

CHEERS

Radllaufer
  • 187
  • 1
  • 2
  • 10
Gloria
  • 1,305
  • 5
  • 22
  • 57
  • 2
    Possible duplicate of [Fixed background image with ios7](http://stackoverflow.com/questions/20443574/fixed-background-image-with-ios7) – Eloy Pineda Aug 05 '16 at 22:42

8 Answers8

8

I'll try and find some reference, but mobile browsers force background: scroll because the repainting is too expensive.

Reference:

CSS - Background images not displaying properly on mobile browsers

@PaulIrish also noted this:

Fixed-backgrounds have huge repaint cost and decimate scrolling performance, which is, I believe, why it was disabled.

There are ways around this, though.. but it's not a quick fix. Have a look at the following question and it's comment.

Android/Mobile Webkit CSS Background-Attachment:Fixed Not Working?

Community
  • 1
  • 1
Labu
  • 2,572
  • 30
  • 34
3

I would recommend looking into scrollr (https://github.com/Prinzhorn/skrollr). It's a parallax library allowing you to achieve the same effect. They have carefully considered issues with mobile devices too:

Some words on why this is an important milestone and why others failed: Mobile browsers try to save battery wherever they can. That's why mobile browsers delay the execution of JavaScript while you are scrolling. iOS in particular does this very aggressively and completely stops JavaScript. In short, that's the reason why many scrolling libraries either don't work on mobile devices or they come with their own scrollbar which is a usability nightmare on desktop. It was an important requirement while I developed skrollr that I don't force you to scroll the way I want it. skrollr on desktop uses a native scrollbar and you can scroll the way you want to (keyboard, mouse, etc.).

You just told me it doesn't work on mobile, but why does it? The answer is simple. When using skrollr on mobile you don't actually scroll. When detecting a mobile browser, skrollr disables native scrolling and instead listens for touch events and moves the content (more specific the #skrollr-body element) using CSS transforms.

Here is an example of the classic parallax background implementation: http://prinzhorn.github.io/skrollr/examples/classic.html

Stated on the example page, another gem worth noting:

Degrades without JavaScript (could be disabled on mobile without breaking everything).

Community
  • 1
  • 1
ctrlplusb
  • 12,847
  • 6
  • 55
  • 57
  • 1
    Unfortunatly "skrollr hasn't been under active development since about September 2014" (see https://github.com/Prinzhorn/skrollr ), which I am pretty sure an issue since the mobile browser landscape moves so quickly. – dhuyvetter Jun 07 '18 at 10:56
2

I noticed the background-attachment problem when upgrading to iOS7. I had to fix the issue using Javascript as I couldn't figure out a solution with CSS alone.

if (iosVersion >= 7) {
    $(document).scroll(function() {
        $('#background').css('background-position', '0px ' + $(document).scrollTop() + 'px');
    });
}
xess
  • 61
  • 1
  • 5
1

I had the same issue you had and struggled with it almost 3 days. But as of June 2020 here is a reliable solution I found for this that works on all devices and has 100% browser compatibility. It allows the desired effect in any place of the page and not just the top or bottom of the page, and you can create as many as you need or want.

The only known issue so far is in safari. The browser repaints the whole image on every scroll movement so it puts a heavy burden on graphics and most of the time makes the image flicker up and down some 10px. There is literally no fix for this, but i think there is also no better response for your inquire.

I hope this works for you. You can check the results live in www.theargw.com, where i have three different fixed background images.

body, .black {
  width: 100%;
  height: 200px;
  background: black;
}

.e-with-fixed-bg {
  width: 100%;
  height: 300px;
  
  /* Important */
  position: relative;
}

.bg-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.bg {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-image: url(https://images.pexels.com/photos/949587/pexels-photo-949587.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
  transform: translateZ(0);
  will-change: transform;
}

.e-container {
  z-index: 1;
  color: white;
  background: transparent;
}
<div class="black"></div>
<div class="e-with-fixed-bg">
  <div class="bg-wrap">
     <div class="bg"></div>
  </div>
  <div class="e-container">
    <h1>This works well enought</h1>
  </div>
</div>
<div class="black"></div>

--------------------- EDIT --------------------- The code posted was missing the background wrapper that allows the background to not change size and maintain the fixed position. Sorry to post the wrong code this morning guys! But here is the change.

Nicholas Gooding Rios
  • 433
  • 4
  • 12
0

I have been searching, and used basics from the Prinzhorn solution on github. Thanks, as it works perfectly. I only have one background-image that showed on every device, except the iPad, and now the image background-attached = fixed and the image background-size:cover.

tosca
  • 31
  • 9
0

Messing around with background size I found that if your desktop size could be cover and position could be fixed then on the media query make the background-size: 100% 100vh

I posted the answer on another question here.

Mihai Chelaru
  • 7,614
  • 14
  • 45
  • 51
pjdux
  • 1
  • 1
0
document.body.onscroll = function(){
    document.body.style.backgroundPositionY = window.pageYOffset +"px";
};
Danbardo
  • 761
  • 7
  • 12
  • It is an alternative solution to the problem. It is quite straight forward and won't require a restructure of the webpage if it is incompatible with any of the solutions provided across all the StackOverflow posts about this. P.S. There is another JS answer here you may have missed. – Danbardo Dec 28 '21 at 10:42
  • 2
    This answer just came up in my post reviews. Code-only answers tend to get auto-detected by the system. Would you mind [edit]ing in your explanation? Thanks. – General Grievance Dec 28 '21 at 13:03
-1

I had a very simple solution for this, after struggling with all the methods of fixing this.

i had the problem on my mobile IOS devices.

css (desktop)

#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {
background-size: auto;
background-attachment: fixed;
}

.widget-wrap {
background-attachment: scroll;
}

Then i overwrite it with media query removing "fixed" as background attachment.

css (mobile)

@media (max-width: 767px) {
#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {

    background-attachment: initial;

}
}

initial - Sets this property to its default value. I think because IOS doesn't accept 'fixed' it falls back to a default value it accepts, scroll.

This worked for me on every device. Hope it helps someone else as well.

Ylama
  • 2,449
  • 2
  • 25
  • 50