Imagem de fundo fixa com ios7

Eu tenho um projeto que estou usando a imagem de fundo fixa. Funciona muito bem em tudo, exceto no ios7. No ipad, a imagem de fundo é ampliada e embaçada. Aqui está o código CSS que estou usando –

.header { display: table; height: 100%; width: 100%; position: relative; color: #fff; background: url(../images/boston2.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 

aqui está um link para a página ao vivo – www.wdeanmedical.com

o que estou perdendo?

Usando background-attachment: fixed com background-size: cover causa problemas na maioria dos navegadores móveis (como você viu). Você pode tentar usar o background-attachment: scroll . Isso não dará o efeito desejado, mas você verá as imagens pelo menos. Você pode usar uma consulta de mídia ou duas para limitar a dispositivos que são tablets ou telefones usando a @media screen and (max-device-width: 1024px){}

OU

Você pode usar background-position: scroll e include algum javascript que manterá a imagem na posição rolada (mantendo-a na parte superior da janela): DEMO

Eu tive uma solução muito simples para isso, depois de lutar com todos os methods para consertar isso.

Eu tive o problema em meus dispositivos móveis IOS.

css (desktop)

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

Então eu substituí-lo com a remoção de consulta de mídia “fixa” como anexo de fundo.

css (móvel)

 /*-------- iPads (portrait and landscape) --------*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { #ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap { background-attachment: initial; } } 

initial – define essa propriedade como seu valor padrão. Eu acho que porque o IOS não aceita ‘fixo’ ele cai para um valor padrão que ele aceita, rolar.

Isso funcionou para mim em todos os dispositivos. Espero que ajude alguém também.

Tente isto:

HTML

 

Words that go over text

css

 .fixed-img { position: fixed; z-index: -1; } 

Exemplo JSFiddle

Exemplo ao vivo

Saiba que este é um segmento antigo, mas queria fornecer uma solução atualizada que se baseia na solução do @ Cruz-Nunez

Baseando-se no tamanho da viewport está sujeito a falhar. Por exemplo, confiar em uma viewport de 767px não funcionará em iPads, e aumentar o tamanho nega o benefício dessa abordagem.

Em vez disso, você pode verificar se o dispositivo tem resources de foco e, se isso não ocorrer, substitua desta forma:

 @media (hover: none) { .homeHero { background-attachment: initial; } } 

Você também pode verificar se o dispositivo tem um ponteiro de curso (por exemplo, um dedo) em vez de um ponteiro fino (por exemplo, um mouse):

 @media (pointer: coarse) { ... } 
 .header {background-position: -99999px -99999px;} .header:before {content: ""; background-image: inherit; position: fixed; top: 0; left: 0; height: 100vh; width: 100%; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover; background-size: cover !important; z-index: -1;} 

Acredito ter alcançado o efeito desejado em meu próprio site usando o acima em conjunto com uma correção para permitir que 100vh funcionem em dispositivos ios.

Ou você pode simplesmente colocar um div transparente que cubra a canvas e usar overflow: scroll. Apenas por causa disso você pode rewrite a altura do div com o javascript para screen.height.

 #scrollbox { width: 100%; height: 100%; overflow: scroll; background: transparent; }