Perfect Full Page Background Image not Working on Mobile

Question

The Perfect Full Page Background Image is not working correctly on mobile...

Can you please help me adjust the CSS/HTML code below?

Previewing in Chrome:

Live on iPhone 7Plus:

Notice how the background image is skewed, distorted, and blurry? Why does it look like this live, but not in the preview mode?

I have this meta code in the doc as well:

<meta name="viewport" content="width=device-width, initial-scale=1">

The CSS:

.MSL-Splash-Section {
    display: block;
    padding: 10px 0px 20px 0px;
    text-align: center;
    background: #FFF url(https://sephora.csod.com/clientimg/sephora/welcome/Animation_Backdrop.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
    border: 1px #00000033 solid;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.MSL-Splash-Content {
    padding: 20px 0px 40px 0px;
}

The HTML:

<div class="MSL-Splash-Section">
    <div class="MSL-Splash-Content">

        <!-- STUFF -->

    </div>
</div>

Can you provide site url ?? – Anzil khaN Mar 06 '18 at 06:09 — Anzil khaN, Mar 06 '18 at 06:09
@AnzilkhaN. Yes: https://codepen.io/matie/pen/YemPyp – Matie Mar 06 '18 at 17:08 — Matie, Mar 06 '18 at 17:08

score 0 · Answer 1 · answered Mar 06 '18 at 16:30

0

Try to add 100vh in your css class like this:

.MSL-Splash-Section {
    display: block;
    padding: 10px 0px 20px 0px;
    text-align: center;
    background: #FFF url(https://sephora.csod.com/clientimg/sephora/welcome/Animation_Backdrop.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
    border: 1px #00000033 solid;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    height:100vh;//Add 100vh
}

answered Mar 06 '18 at 16:30

masplayer

26
3

Although the background height fits with your solve, it doesn't cover as intended with this solution. Thew height gets cropped off. I need the background image to cover the entire div. – Matie Mar 06 '18 at 17:03
Add: background-position: center; – masplayer Mar 06 '18 at 17:25
As it turns out, iOS devices don't support background images in shorthand CSS form. Also, I don't think iOS supports the background image "cover" property at all. See post: https://stackoverflow.com/questions/36686654/fixed-background-images-disappear-on-iphone-ipad – Matie Mar 06 '18 at 17:28

score 0 · Answer 2 · answered Mar 06 '18 at 17:26

0

UPDATE:

iOS doesn't support shorthand CSS for background images that "cover" a section.

Answers:

Fixed background images disappear on iPhone/ iPad

Background image not showing on iPad and iPhone

answered Mar 06 '18 at 17:26

Matie

181
1
19

Perfect Full Page Background Image not Working on Mobile

2 Answers2