Hi all,
I’m having a heck of a time with iOS and why my background is all zoomed in and pixelated instead of background: cover.
It works on Android and Chrome, but not iOS for some reason.
Can anyone tell me what’s going on ?
http://putmeonwordpress.com/amelia/
Any help would be greatly appreciated.
Here’s my CSS
…
/* Parallax Front Page */
section.module.parallax {
height: 500px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
width: 100%;
}
section.module.parallax-1 {
background-image: url(“img/background-jar.jpg”);
background-position: 60% 50%;
}
section.module.parallax-2 {
background-image: url(“img/background-cows.jpg”);
}
section.module.parallax-3 {
background-image: url(“img/background-fruit.jpg”);
}
section.module.parallax-4 {
background-image: url(“img/background-jugs.jpg”);
}
section.module.parallax-5 {
background-image: url(“img/background-berries.jpg”);
background-position: top;
}
.tagline-container { position: relative; height: 100%; }
.tagline {
font-size: 1.5rem;
color: #fff;
line-height: 1em;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
font-weight: 900;
text-shadow: 2px 2px 7px rgba(0, 0, 0, 0.99);
}
…
