My fixed backgrounds arent displayed correctly on mobile devices

Question

Still having problems. I was noted for not being specific enough in my last post, so let me try to be more specific. I can’t find a way to get my project to transfer to my iPhone 6. I used various media queries, and the responsive design works in Firefox and Chrome “checks the item”. When I open it on my iPhone 6, it looks like this.

My goal is to get closer to this:

Here is the website: http://mattvwhittle.com/WeddingWebsite/index.html

Here is what I wrote in the HTML meta tags:
meta charset = "utf-8"
meta name = 'viewport' content = "width = device-width,
initial scale = 1, maximum scale = 1, minimum scale = 1, user scalable = no "
meta http-equiv = "X-UA-Compatible" content = "IE = edge, chrome = 1" meta name = "HandheldFriendly" content = "true"

Here is the media query I wrote about this issue:

@media only screen and (max-width: 480px) { .fixed-bg { position: relative; background-size: auto contain; background-attachment: fixed; background-repeat: no-repeat; } } 

I am new to media queries, but I tried:

 background-size: auto 100%; background-size: 100% auto; background-size: 100%; background-size: conain; 

None of them achieve the desired effect. Any help would be greatly appreciated. Thank you.

Answer 1

background-attachment: fixed; not working on iOS These are not best practices. I somehow did work with my site, but if someone stumbles upon this at an early stage of site assembly, DO NOT DO THIS !!!

Answer 2

Try this - you don’t need background-size:100% or you even need a media request to process the background image. The CSS3 background-size:cover property does a great job of this. Works well on all mobile devices;

 body { background-color: #000; background-image: url(yourimage.jpg); background-repeat: no-repeat; background-position: center; background-attachment: fixed; webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }