I'm creating a website, using chrome to debug. I am creating a scrolling page with full height images as background images for my divisions, using "background-size: cover;" and "background-attachment: fixed;".
On chrome's (mobile) debug viewer on my pc, even though there is more scrolling text then could fit over the image, the image stays the same size, and the content just scrolls over an image that is not zoomed in or distorted.
After uploading to s3 and viewing on my mobile device, the background-image for the div with a lot of content zooms the photo in (assuming it does this to continue coverage), to a point which it does not look good.
So far I have tried changing the background-attachment of the content wrapper to fixed, and then scroll just to see if it would work; it did not. The only thing that has allowed the background image to NOT zoom in, was to change the background-size from cover, to 100% 80%;. This kept the original zoom, but obviously did not cover all of the text, causing there to be a gap between one full size image div, and the next.
` .second-page{
background-image: linear-gradient(rgba(77, 77, 77, 0.5), rgba(77, 77, 77, 0.5)), url(images/background6_port.jpg);
background-repeat: no-repeat;
min-height: 100vh;
min-width: 100vw;
background-size: cover;
position: relative;
background-attachment: fixed;
}
.content{
margin-right: 15%;
margin-left: 15%;
}`
Expected Results: background-image covers 100% of viewport on mobile, allowing text and other content to scroll over it without zooming in
Actual Results: background-image zooms in to cover all of content area, causing pixelation and bad visual experience.
