Fixed background on ipad

The first div (row) on my web page is set to height 100vh and has a fixed background set to cover.
As you scroll down, the next row appears and you get a nice parallax effect.
But it doesn’t work on ipad.
If I use

.row--banner4 {
  background: url(../img/banner4.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:100vh;
}

on the ipad I get no background image

If I add

 background-attachment:scroll;

The image appears at the right size but, obviously, it scrolls.

I’ve tried inserting extra divs and images along the lines of PaulOB’s demo on Detect iPad - #5 by ralphm but, as I only want it on one row, not the whole page I can’t get it working with fixed positioning.

Is there a pure css solution or do I need some javascript here?

Thanks!

Hi there treacle0996,

have you tried…

background-attachment:fixed;

coothead

Hello
Yes, background disappears again…

Could you put up a demo on CodePen? Then I can test it on an iPad.

The ipad doesn’t do fixed backgrounds and it will just scroll along with the element.

As mentioned you can do it by using a fixed element instead but the problem arises if you only want that background to show in one particular div. It all depends of how your page is set up and what else is going on but what you can do is apply the fixed element as shown and then give your page elements a white background (or whatever) and then for the parallax div you leave it transparent so that it shows the fixed background behind.

e.g.

Of course if your page is more complicated than that then it may not be possible. An alternative is just to use a parallax script and not fixed positioning at all. Usually the parallax script adjusts the position of the image so that it moves at a different rate to the scrolling page and creates a true parallax effect rather that the faux parallax of the fixed background trick.

1 Like

Thanks paul. That looks great if you only have one faux parallax div, unfortunately I wanted another one further down the page.
So my options are a parallax js script or detect an iPad and give it a scroll instead?
And Ralph, I’ll have a look at codepen tomorrow.

No need to detect it as it will just scroll automatically.

e.g.

.parallax {
height:300px;
 background:url(big-image.jpg) no-repeat 50% 50% fixed;
 background-size:cover;
}

Here’s an example that works fine on an ipad (except it scrolls with the div rather than being fixed of course).

If your image isn’t showing on the ipad then there most be something else going on. Do you have a link we can test?

My image isn’t showing now - but, at some point before I tried all the other the workarounds it was, but it was zoomed in (no cover applied?) and, yes, it was scrolling. It’s only on my localhost at the moment, but I’ll try to get it back to that point and put it somewhere you can get to it, is codepen the best place?

Codepen would be fine.

According to Can I use, the fixed background on iOS doesn’t work when in combination with background-size: cover
Could there be a workaround that uses something other than size cover?

It doesn’t work on my ipad ios8 whether you use cover or not. I don’t know if its been fixed in ios9 but I haven’t found any mention of it. I’ll have to install the latest update to ios9 for my ipad and test :smile:

The example you posted in post 7 is similar to what I was seeing previously - fine on desktop, on ipad it scrolls (which is acceptable as a workround) but it is also zoomed in (can see front left headlight and bit of bonnet).

How do I know what version of ios / safari my ipad mini is running? I can’t find it in settings. It’s almost a year old, and I don’t think it’s ever been upgraded.

I would put an example up, but I’m away from home at the mo and can’t upload to my websites.

If I remember correctly its under “About” in the settings. I’ve just upgraded mine to ios9 and it still doesn’t scroll so hasn’t been fixed yet (if it ever will because fixed position is awkward on ios devices).

I suppose it depends on the image and the size of the div you are displaying it in. Usually you would set a background image to cover anyway even if wasn’t fixed positoined but I guess you may have a large image covering the whole body.

You may have to resort to (god forbid) browsers sniffing and detect the ipad. I found this script a while ago and it seems to work and even if it doesn’t its not a disaster as its just an image that you are displaying.

<script type="text/javascript">
var isiPad = navigator.userAgent.match(/iPad/i) != null;
if (isiPad) {document.getElementsByTagName("body")[0].className+=" ipad";}
</script>

That adds a class of ipad to the body tag so you can add rules after your original and remove the background-size settings.

    .ipad .row--banner4 {
    background:url(newipadimage.png) no-repeat 50% 50%;
   background-size:auto;/* just in case */
    }

For mobiles I would just use media queries and set anything less than 600px to have a scrolling image anyway as fixed position can hamper mobiles quite badly.

Never thought you would recommend browser sniffing!! Desperate measures…

Once I’ve sniffed it out do you think I could use js to fix the background in place? I’ve seen parallax scripts running successfully on ipad, so I assume it’s possible?

Or I could just have various sized versions of the image that fit standard ipad resolutions without using cover? And apply them with media queries?

I have a windows 8 phone, and have not seen any problems with scrolling backgrounds. Is it more of a problem on android?

The problem with mobile is that it doesn’t provide scrolling events as such but more of a start and finish so any scrolling effect only takes place when the user has stopped moving the page so the animation would happen all at once at the end.

This article explains it better than me and offers some scripts to support mobile. It’s not a simple issue and will take a little bit of work but seems to be the best implementation.

I have an old iphone 4 and no web animation is smooth on it. Menus don’t slide they stagger :smile:

Thanks for the link.
The more I read, the more questions I have!
If the scroll problem is touch-related, not specific to ipad, wouldn’t there be similar problems on a touch-enabled laptop? Are they detected as ‘mobile’?
And what about macbooks? What quirks do they have?

Same here :smile:

I’m guessing that there would be similar problems as they have to react to the user touching and swiping etc which is going to take some time but I don’t think it will be as bad because mobiles have effectively two viewports. A layout viewport and a visual viewport. The mobile device is like a window that you look through and the real layout is the view outside the window (its explained better in that article I just linked to). To see more of the layout you would need to move the window around. This is why fixed elements become awkward on these devices because of the relationship between these ‘viewports’.

Nothing is detected as mobile by default. Devices are mobile or they are not mobile but in most cases you don’t want to be testing for them as you would have to gather a list of all the mobile operating systems and sniff for them again thus missing out on any future devices. As we have already said browsers sniffing is bad so best avoided unless there is no choice.

You can test for touch with JS but then you run into the problem of whether the device also has a keyboard (like the laptops you mentioned and indeed quite a number of desktops now). You can’t just assume touch only so now you also need to check for keyboard and the issue just gets more complicated as you progress.

Obviously you can use media queries and just make a best guess that devices smaller than 768px will most likely be mobile or use device-width for then test instead, Then you would need to test for larger tablets like the ipad and once again end up checking for everything.

Bearing all this in mind I would take the simplest approach and that would be to use a media queries to maybe change the image for smaller screens and not to use fixed. As mentioned previously your page should actually be working even though you have used fixed except that the image won’t scroll and will be zoomed.

Definitely don’t want to end up testing for everything. Will do what I can with screen-width media queries.

The article you link to is pretty old - apart from the screen resolutions quoted, is it all still the same? And is a ‘mobile’ anything with touch?

Devices I have available are a windows 7 pc, windows 8 phone and ipad ios8. The guy I’m developing the site for has an imac, macbook and iphone - think we are going to be seeing some very different effects. Unfortunately the ones I see are the ones he wants!

Any advice on best way to emulate an imac or macbook on windows?

No some desktops/laptops are touch these days not forgetting tablets like the ipad, ipad2 and ipad mini etc all of which are not mobile.

You can’t really emulate an imac on the PC and if you can’t afford a spare machine then it becomes quite awkward and you probably need to use a service like browsercam or similar. I’m lucky in that I have both a PC and imac and spare laptops with odd browsers for testing which makes life easier.

The imac has the developer sdk downloaded which comes with he ios simulator so that you can test all ios devices. The simulator is more or less 100% accurate and makes testing iphones and ipads quite easy.

It’s very hard to test for everything unless you are a large company with a lot of resources.

However, I seldom find a problem ins Chrome or safari on the mac as they render pretty much the same as on Windows (just look so much better though). There may be issues if you cram text into a small space because the systems render text at different widths but that is something you should be aware of in responsive design anyway and always design for ‘what if’.

These days it changes daily which is why the only forward looking approach is to be device agnostic and work with the design and not chase devices. Create fluid sites that adapt and that can go from large to small on your desktop browsers and then you will cater for everything anyway. Of course things like what properties are supported still needs to be taken into account and the challenge is to be creative yet accommodate everyone as much as possible. Sometimes this means that when something doesn’t work you may need to change to something simpler that does.

Much more info here.