My fixed backgrounds arent showing properly on mobile devices

Question

Still having trouble. I was flagged for not being specific enough in my last post, so let me try to be more specific. I cannot find a way to get my design to translate to my iPhone 6. I have been using various media queries, and the responsive design works in Firefox and Chrome "inspect element." When I open it on my iPhone 6 it looks like this.

My goal is to have it look closer to this:

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

Here is what I have written 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 have written concerning this matter:

@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 have tried:

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

None of these are achieving the desired effect. Any help would be completely appreciated. Thanks you.

Pouya Ataei Pouya Ataei · Accepted Answer · 2015-08-18T02:50:59

Try this - you shouldn't need background-size:100% or even necessarily need a media query to handle the background image. The CSS3 background-size:cover property handles that pretty well on its own. 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; 
}

My fixed backgrounds arent showing properly on mobile devices

2 Answers