CSS Background Image Appears in Wrong Position on Mobile

Question

I'm having trouble getting the background to display correctly on my landing page. On my desktop, it shows up fine, but on mobile, it appears to be centered in the middle vertically at the top of the page. I'm new to front-end and have been trying all sorts of hacks over the past 4 hours. Could somebody point me in the right direction?

I've set the image to scale to cover the entire screen. There shouldn't be any blank areas. I've tried using responsive modes on my desktop, and the Wright Glider mostly stayed in view as I resized, so the image should also center in the middle of the ... viewport?/window.

For the background, I have a normal sized image, and a cropped image I use for smaller devices

My site is at http://we-fly.ddns.net

Tested only with Chrome 49 on all devices, Android is v5.1

Responsive mode on the desktop doesn't seem to produce the same results.

Source: https://gist.github.com/yanalex981/992a60dd54be82162a45

Screenshots:

• Desktop
• Nexus 4
• Galaxy Tab A 8

Also, if anybody has any suggestions, please share them with me

Answer 1

To fix the issue of your image getting cut off part way, you need to set your background position in your media query's to initial... So in each of your css Media query's paste the following code:

background-position: initial; 

This will reset your background position to default when on mobile... from here you should be able to apply different styles to stretch/expand the image to your liking. :)

Answer 2

This is my second answer, I created this instead of adding it to my initial answer because the method is different.

In your HTML (index) file, add the image like this:

<img id="imgBackground" src="http://we-fly.ddns.net/images/back.jpg" />

(I suggest adding it directly after the body tag)

In your CSS, I am just going to post the entire thing, Its a little funny because your last @Media (Min-Width: 601px) is overriding your default for your desktop page... you may want to consider deleting this Media Query... See comments in code below to see changes:

    /* Set initial values for your image background */
#imgBackground{
    position:absolute; /* Absolute Positioning so we can use "top" and "Left" */
    top:0px; /* Set top edge to 0px (Top of the screen) */
    left:0px; /* Set left edge of image to 0px, so it starts at the left edge of the screen. */
    width:100%; /* We want our widt to be 100% of our browser window */
    height:auto; /* we don't care about the image height, so let it set itself based on the image's proportions */
    position:fixed; /* Make our image scroll with the user so if they can scroll they don't leave our background behind, exposing the white "body" tag background. */
}

body {
    text-align: center;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    margin: 0;
    padding: 0;
}

#quote-conatiner {
    position: fixed;
    margin: auto auto 24px auto;
    bottom: 20%;
    left: 0;
    right: 0;
    text-align: center;
    background-color:rgba(180, 180, 180, .4);
}

h3 {
    font-family: Garamond sans-serif;
    color: white;
    width: 80%;
    margin: .5em auto .5em auto;
}

.button {
    font-family: sans-serif;
    text-decoration: none;
    padding: .3em 0.6em;
    border-radius: 8px;
    border: 2px solid #59169c;
    background-color: #417;
    color: white;
    box-shadow: 0 0 64px black;
}

.button-container {
    position: fixed;
    margin-left: auto;
    margin-right: auto;
    top: 80%;
    left: 0;
    right: 0;
}

.button:active {
    background-color: #330855;
}

@media only screen and (max-width: 600px) {

/* set image background to achieve max Height and we don't care about width (auto) on mobile displays. */
    #imgBackground{
        position:absolute;
        top:0px;
        left:0px;
        width:auto;
        height:100%;
        position:fixed;
    }

    body {
        margin: 0;
        padding: 0;
    }

    h3 {
        font-size: 1.2em;
    }

    .button {
        font-size: 1.4em;
    }
}

@media only screen and (max-width: 400px) {

    /* set image background to achieve max Height and we don't care about width (auto) on mobile displays. */
    #imgBackground{
        position:absolute;
        top:0px;
        left:0px;
        width:auto;
        height:100%;
        position:fixed;
    }

    body {
        margin: 0;
        padding: 0;
    }

    h3 {
        font-size: 0.8em;
    }

    .button {
        font-size: 1.0em;
    }
}

/* May want to consider getting rid of this Query, if you don't it is overriding your styles set above your media querys. */
@media only screen and (min-width: 601px) {

    /* Set image background qualities for any display larger than 601px.*/
    #imgBackground{
        position:absolute;
        top:0px;
        left:0px;
        width:100%;
        height:auto;
        position:fixed;
    }

    body {
        margin: 0;
        padding: 0;
    }

    h3 {
        max-width: 600px;
        font-size: 1.3em;
    }

    .button {
        font-size: 1.3em;
    }
}

Answer 3

"background-size: cover" does not cover mobile screen

and

height: 100% or min-height: 100% for html and body elements?

held the answer. I had to set the height of the root elements for background-size: cover to work:

html {
    height: 100%;
}

body {
    min-height: 100%;
}

It works on the Nexus 4 and on the Galaxy Tab

Reason for having to do this (stolen from last answer):

Incidentally, the reason why you have to specify height and min-height to html and body respectively is because neither element has any intrinsic height. Both are height: auto by default. It is the viewport that has 100% height, so height: 100% is taken from the viewport, then applied to body as a minimum to allow for scrolling of content.

Answer 4

@Alex how exactly you want image to be display...for different screen size you can use the @media css property to resize image as per screen size.

@media screen and (min-width: 480px) {
body {
    property: attribute;
}
}

See more about the @media css attributes here: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp