How do I fix the background of a <div> in iOS Safari (iPad)?

Question

I have a layout that works very well on the desktop, but when viewing in iOS Safari (iPad specifically) it does not appear as expected. I want the div background to stay fixed when scrolling the page. Does anyone know how to fix this issue?

css

#caixa{
    background:url(imagem.jpg) no-repeat center center fixed;      
    height:300px;
    width:300px;
}

html

<div id="caixa"></div>

Answer 1

Actually, your background is fixed. The problem is "viewport"...

First, let’s recap why the fixed positioning does not work as expected. Safari Mobile uses a "viewport" to display websites. Imagine a book before you. Take a piece of paper, cut a 320 416 square in the same, and place the paper with the square opened in the middle about the book. To read the book, move the paper and position the hole about the words you want to see. That’s exactly what the Safari Mobile’s "viewport" is doing. When you touch and drag, you are moving the "viewport" by over the site, which remains static "below" him.

This makes fixed positioning null and void in the iPhone. An element that has fixed positioning is attached to the body, and not to the viewport. That is: the fixed is currently functioning as desired, although we would like you to be posted to "viewport".

source: http://old.doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/

Answer 2

@Paulomaciel,

let your id like this:

#caixa{
  background:url(imagem.jpg) no-repeat;      
  height:300px;
  width:300px;
  background-position: center center;
  background-attachment:fixed;
}

Or try:

@media screen and (-webkit-min-device-pixel-ratio:0){
  #caixa{
    background:url(imagem.jpg) no-repeat;      
    height:300px;
    width:300px;
    background-position: center center;
    background-attachment:fixed;
  }
}

Answer 3

Have you tried it on another iPad? Are you sure it’s not an error of your iPad. I once had a margin preview problem in firefox. I did everything and nothing. Then on another PC that only had Chrome (and the IE crap) I installed firefox and it worked well. I don’t know what caused the problem in my firefox, I had Windows7. For other reasons I took out windows and started using linux (which firefox is default) and now firefox does not present that error. Maybe it’s something like your iPad.