Fixar background image em dispositivos móveis
Tenho um problema em dispositivos móveis que ao rolar a página a imagem de background está se movendo um pouco e, assim, se redimensionando, como pode ser visto em http://www.fisioterapeutacamila.com/my-bootstrap/sobre.html
Já tentei várias alternativas css e até javascript mas o problema persiste.
.bg-1, .bg-2, .bg-3,
.bg-1:after, .bg-2:after, .bg-3:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.bg-1 li span, .bg-2 li span, .bg-3 li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 1;
z-index: 0;
}
.bg-1 li span { background-image: url(../images/slide-1.jpg); }
.bg-2 li span { background-image: url(../images/slide-3.jpg); }
.bg-3 li span { background-image: url(../images/slide-2.jpg); }
ol,ul {
list-style:none;
}
html
<body>
<ul class="bg-2">
<li><span></span></li>
</ul>
<nav class="navbar">
<div class="container-fluid social-nav">
...
Alguma sugestão?
Discussão (3)
Carregando comentários...