I have the following CSS for a div that spends 100% of the viewport.
.content
{
background-image: url('../images/content_bg.png');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
color: white;
}
On desktop this works fine. Even when I scaled down the desktop window to mobile sized it stills looks as I want it to.
However, both on android and iPhone the background is scaled to entire size of the div, which greatly distorts it.
I want it to stay proportionate, but have the content scroll over it.
I also tried removing background-size: cover. This makes it look how I want it to, but it doesn't cover the div obviously, so I have a bunch of content that has spilled out.
I'm running a newer android and iPhone with the most recent updates, which I believe supports the fixed backgrounds, so I'm at a loss as to what is wrong. When I remove fixed the desktop version looks exactly like it does on mobile. So it appears for some reason that is the issue that fixed isn't being applied to mobile.
