Estou com o seguinte problema:
Possuo algumas seções na página separadas em divs. Duas dessas divs recebem uma imagem como background
e background-position:fixed
, então quando rola a página as imagens devem rolar junto, fazendo aquele efeito Parallax simples.
Porém no Google Chrome, ao rolar a página, a imagem não segue e quebra toda.
No Firefox funciona e, por incrível que pareça, no IE também!
Acontece na página "sobre".
p, h3 {
font-family: "Open Sans",sans-serif;
font-weight: 200;
}
ul {
list-style: outside none none;
}
.social p, a:hover, a:active {
text-decoration: none;
}
h1, h2, .menu, .ver-mais {
text-align: center;
}
.ver-mais, .promo-title, .header-bkg, .slide, .separator {
background: none repeat scroll 0 0 #00011c;
}
.social img, nav li, .box-purple, .ver-mais, .gallery img, .ambiente img, .reside a {
transition: all 1s ease 0s;
}
.promocoes, .wrapper-sobre, footer, .social p, a:hover, a:active, .menu ul li a {
color: #fff;
}
.promo-title, .ambiente h1, .portfolio .ver-mais:hover {
color: #ed297b;
}
.box-purple, .promocoes a, .ver-mais {
display: block;
}
.ambiente h3 {
border-bottom: 1px solid black;
margin-bottom: 20px;
padding-bottom: 5px;
}
.header-bkg, .slide .item, .ambiente img, .separator {
width: 100%;
}
.box-purple, .promocoes a {
padding: 10px 20px;
}
.promocoes ul li, .portfolio-item img, .contato {
padding: 10px;
}
.promocoes ul li, .ambiente p {
text-align: justify;
}
.ambiente a, .promo-title {
font-weight: bold;
}
.ver-mais, .ambiente h1 {
margin: 0 auto;
}
.galeria, .ambiente img, .atendimento, .sala-vip, .localizacao {
padding: 20px;
}
.menu {
font-size: 7em;
margin-right: 5%;
margin-top: 4%;
}
.header-bkg {
height: 140px;
opacity: 0.8;
position: absolute;
z-index: -1;
}
.slide {
margin-top: -20%;
z-index: -5;
}
.slide .item {
max-height: 500px;
opacity: 0.6;
}
.promo-bkg-img {
background: url("../img/tattoo_2.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.promo-bkg-filter {
background: none repeat scroll 0 0 rgba(0, 1, 28, 0.38);
}
.box-purple {
background: none repeat scroll 0 0 #46132d;
}
.box-purple:hover {
background: none repeat scroll 0 0 #7c2f57;
}
.promo-title {
font-size: 62pt;
letter-spacing: 0.7em;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
text-transform: uppercase;
}
.promo-list {
margin-bottom: 50px;
}
.portfolio-item img {
width: 90%;
}
.ver-mais {
color: #000;
}
.ambiente {
padding-bottom: 20px;
text-align: center;
}
.ambiente a {
color: #37011d;
}
.ambiente h1 {
border-top: 1px solid black;
width: 50%;
}
.ambiente img {
height: 300px;
}
.ambiente ul li {
list-style-type: square;
text-align: left;
}
.gallery img:hover, .ambiente img:hover {
box-shadow: 0 0 50px #999;
}
.separator {
height: 10px;
}
.social {
background: none repeat scroll 0 0 #010240;
text-align: center;
}
.social img {
margin: 20px;
width: 30%;
}
.social img:hover {
}
.sobre, .atendimento, .sala-vip {
background: url("../img/texture-bkg.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.sobre h1, .atendimento h1, .sala-vip h1, .sobre h2, .atendimento h2, .sala-vip h2, .sobre p, .atendimento p, .sala-vip p {
color: #000;
}
.sobre img, .atendimento img, .sala-vip img {
margin: 2% 10%;
width: 80%;
}
.atendimento p, .sala-vip p {
color: #fff !important;
}
html {
height: 100%;
min-height: 100%;
}
body {
min-height: 100%;
}
html, body {
}
@media not all {
.equips, .sala-vip {
background-attachment: scroll;
}
}
.equips, .sala-vip {
padding: 5% 0;
}
.equips h1, .sala-vip h1 {
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
.equips {
background: url("http://oi61.tinypic.com/2vs1en8.jpg") repeat fixed 0 0 rgba(0, 0, 0, 0);
}
.sala-vip {
background: url("http://oi61.tinypic.com/dph8n6.jpg") repeat fixed 0 0 / 100% auto rgba(0, 0, 0, 0);
}
.contato {
background: none repeat scroll 0 0 #000149;
font-size: 15pt;
}
.contato span {
font-size: 10pt;
}
input:focus, input:hover, textarea:focus {
background: none repeat scroll 0 0 #010240;
transition: all 0.5s ease-in 0s;
}
.footer {
background: none repeat scroll 0 0 #232323;
padding: 10px;
}
.reside {
float: right;
}
.reside a {
color: #d81900;
}
.reside a:hover {
color: #fff;
}
.navbar-nav {
height: 140px;
}
.pagina-ativa, .nav li:hover, .nav li:focus {
background: none repeat scroll 0 0 #ed297b;
height: 140px;
margin-top: -47px;
padding-top: 47px;
}
.nav .active, .nav li a:hover, .nav li a:focus {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.form-control, .btn-send {
background: none repeat scroll 0 0 #822c58;
border: medium none;
border-radius: 0;
color: #fff !important;
font-family: "Playball",cursive;
font-size: 16pt !important;
padding: 4px !important;
}
.form-control:-moz-placeholder, .btn-send:-moz-placeholder {
color: #ecaacc;
}
.form-control::-moz-placeholder, .btn-send::-moz-placeholder {
color: #ecaacc;
}
.btn-send {
background: none repeat scroll 0 0 #dc64a1;
color: #ecaacc !important;
}
.shot {
display: none;
opacity: 1;
}
.navbar-toggle .icon-bar {
background: none repeat scroll 0 0 white;
}
@media screen and (min-width: 320px) and (max-width: 380px) {
#logo {
margin-top: -20px;
width: 50%;
}
.promo-title {
font-size: 30pt;
letter-spacing: 0.3em;
}
.promocoes a {
padding: 10px 20px;
}
.promocoes ul li {
padding-bottom: 1px;
}
.ambiente img {
height: 200px;
width: 80%;
}
}
@media screen and (max-width: 620px) {
.promocoes, .sobre, .galeria {
background: url("../img/texture-bkg.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
}
}
@media screen and (min-width: 410px) and (max-width: 620px) {
#logo {
width: 40%;
}
.promo-title {
font-size: 30pt;
letter-spacing: 0.3em;
}
.promocoes ul li {
padding-bottom: 1px;
}
}
@media screen and (min-width: 600px) and (max-width: 800px) {
#logo {
width: 70%;
}
.navbar-nav {
margin-top: -33px;
}
.slide {
height: 420px;
margin-top: -28%;
}
.promo-title {
font-size: 40pt;
letter-spacing: 0.5em;
}
.promocoes a {
padding: 10px 20px;
}
.promocoes ul li {
padding-bottom: 1px;
}
.ambiente img {
height: 400px;
width: 80%;
}
}
@media screen and (max-width: 760px) {
.container > .navbar-collapse {
margin: 0 auto;
}
.navbar-collapse {
padding: 20px 15px !important;
width: 100%;
}
.navbar-nav {
height: auto;
margin: 0 auto;
}
.menu {
background: none repeat scroll 0 0 #333349;
font-family: Arial;
font-size: 18pt;
margin-top: 20% !important;
}
.menu li:hover {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
height: auto;
margin: 0;
padding: 0;
}
.pagina-ativa {
height: auto;
margin: 0;
padding: 0;
}
}
@media screen and (min-width: 1020px) {
.slide .item {
max-height: 500px;
width: 100%;
}
.ambiente img {
height: 200px;
width: 100%;
}
}
@media screen and (min-width: 1280px) {
.slide .item {
max-height: 600px;
}
.ambiente img {
height: 300px;
width: 100%;
}
}
@media screen and (min-width: 1920px) {
.slide .item {
max-height: 1000px;
}
}
<div class="wrapper-sobre">
<div class="sobre">
<div class="container ">
<div class="row">
<div class="col-md-12">
<h1>Sobre</h1>
<p>Há 6 anos o Jhony Bigu atua no mercado da tatuagem na Zona Norte e atualmente nas regiões do Itaim Bibi, Vila Nova Conceição e Vila Olímpia.</p>
<p>O Jhony Bigu esta altamente qualificados e apresenta um novo conceito de tatuagens personalizadas que segue um alto padrão de qualidade.</p>
<p>O tatuador Jhony Bigu é um profissional experiente e qualificado que está apto a ajuda-lo a encontrar ou criar o melhor desenho para sua tatuagem, prestando um atendimento personalizado desde a seleção de ideias até a elaboração da arte final para a tatuagem escolhida.</p>
</div>
<div class="col-md-12">
<div class="col-md-6">
<h2>Studio</h2>
<p>O Studio JB Tattoo está constantemente renovando seus equipamentos e materiais em busca da melhor tecnologia e qualidade disponível no mercado. </p>
</div>
</div>
</div>
</div>
</div>
<div class="equips fixbg" id="equipamentos">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<h1>Equipamentos</h1>
</div>
<div class="col-md-6 box-purple">
<p>
Todos os matérias utilizados no Studio são totalmente descartáveis nas tatuagens, evitando-se o risco
de contaminação cruzada. O Studio conta com um ambiente aconchegante para que seus clientes sejam
atendidos de forma bastante à vontade, tendo o máximo de conforto durante a elaboração dos desenhos,
assim como na realização dos procedimentos de tatuagens.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="atendimento" id="atendimento">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<h1>Atendimento</h1>
</div>
<div class="col-md-6 box-purple">
<p>Política de atendimento:
<ul>
<li>Cada sessão de tatuagem tem duração de 1 hora</li>
<li>Acima de uma sessão de tatuagem ocorrera com duração media de 3 horas (podendo variar de acordo com a resistência e condições de cada cliente).</li>
<li>Necessário o preenchimento de Termo de responsabilidade para todos os clientes.</li>
<li>Tatuagens para menores de idade somente na presença de um dos responsáveis e mediante o preenchimento do termo de responsabilidade e documentos de identificação com foto.</li>
</ul>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="sala-vip fixbg" id="sala-vip">
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>Sala Vip</h1>
</div>
<div class="col-md-6 box-purple">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>
</div>
Como fica ao rolar a página:
Pesquisando na net, achei essa possível solução:
$(document).scroll(function(){
$(this).find('.fixbg').hide().show(0);
});
Porém com esse código, ao rolar a página, o Scroll não vai até o final, trava nas imagens e não desce mais.