[Solved] Full Page Backgrounds on iOS (background-size: cover) - CSS-Tricks - Page 3

This topic has 51 replies, 1 voice, and was last updated 3 years, 4 months ago by hc earwicker.

Viewing 15 posts - 31 through 45 (of 52 total)

← 1 2 3 4 →

Author

Posts
May 27, 2014 at 5:50 pm #171204

mqn
Participant

sure..would love any solve to this..

https://gist.github.com/anonymous/9a88ce1084c37e705381

October 13, 2014 at 8:08 am #186121
tom_ano
Participant
Found this solution/tuto that works like a charm.
https://ihatetomatoes.net/make-parallax-website-responsive/

Also note that background-attachment: fixed; was the line generating erros on IOS
so I keep the following standard:
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
height: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;

and only do a media query for large screens:
@media only screen and (min-width: 768px) {
.bcg {
```
                    background-attachment: fixed;
                }
        }
```
Hope this helps someone.
October 15, 2014 at 12:14 pm #186327
Mikkel
Participant
I think I solved it.

I didn´t do it with “html” – instead with a fixed “div”
```
.bg {
        background: url(image.jpg);
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        height: 100%;
        width: 100%;
        position: fixed;
        background-position: center center;
        background-repeat: no-repeat;
    }
```
It works on desktop and mobile (iOS and Android) – I just use it on Media Query “max-with: 1024″…

Hope that helps!

Mikkel
November 22, 2014 at 7:41 am #188978

Mary
Participant

This solved that problem for me too, thanks everyone!
The only thing I notice on my iphone is when I scroll, the background-image gets a bit ‘jumpy’…is that normal or…

November 22, 2014 at 9:57 am #188981

Mary
Participant

oh, that’s because of the bar at the bottom that disppaers after scroll offcourse, so…anyway, so happy I found this solution!

December 26, 2014 at 4:16 pm #191664

darylbennett
Participant

I’m still working on this, but I’m curious. What’s the best way to test this? I operate Linux and Windows, so I can test these across desktop Chrome, chromium, opera, IE, Mozilla, etc. I can publish it and see how it operates on my mobile (android and windows phone).

I’ve tried the site testmobile.me to see how it appears there, but the background-size:cover shows normally there (when testing the Iphone).

Is there a way that I can test these on the mobile accurately from my PC, because right now, altering the site and publishing it live seems ridiculous. From what I recall, I’ve tested it on Safari (from windows PC) successfully. so want to know what you all think is the best way to go forward w/ this debugging.

cheers

December 26, 2014 at 6:01 pm #191666

Senff
Participant

Chrome has an mobile emulator built in, accessible through the inspector: http://www.marksenff.com/front-end/you-already-have-a-retina-screen-emulator/

Still, always test on actual devices as well. Tools like Prepros have a built-in web server that enables you to access your local site on a phone or tablet or anything using your wifi network.

June 10, 2015 at 4:26 pm #203556
stacigh
Participant
I’m doing something similar. I have a div and a few children inside of it. I’m trying to apply a fixed position to a background image with a size of cover but because I’m using Modernizr I can detect for devices that are touch enabled:

HTML:
```
<div class="hero">
  ...
</div>
```
CSS:
```
.hero {
  background-image: url('...');
  background-size: cover;
}

.no-touch .hero {
  background-attachment: fixed;
}
```
.no-touch is a class that Modernizr will append to the <html> tag if the device isn’t touch enabled.
June 15, 2015 at 6:15 am #203761

pat35249
Participant

Yeah,given that the screen size of iOS devices.

August 12, 2015 at 5:04 pm #206463

Voolu
Participant

I was searching for a solution and read the comments and tried k00ka’s solution.

It worked prefectly for me.
I didn’t read on any further, there is probably an easier and more up to date method.

Registered just now to thank k00ka. ^_^ Brilliant!

August 12, 2015 at 5:05 pm #206464

Voolu
Participant

Perfect! Thanks Very Much Sir!

August 13, 2015 at 7:30 pm #206523

j_holtslander
Participant

I created a pen that illustrates a solution to this problem in Bootstrap… (http://codepen.io/j_holtslander/pen/RPOJVj)

August 13, 2015 at 8:38 pm #206525
Shikkediel
Participant
This one’s had more lives than a cat, some of which identical or far from a solution to the original question.

Anyway… for those who choose the fixed div approach, adding the following to the CSS will make this less detrimental to screen repaints (apparently also the reason background-attachment: fixed doesn’t work in the first place) :
```
#backdiv {
-webkit-backface-visibility: hidden;
}
```
Or even on webkit related desktop browsers for that matter.
August 15, 2015 at 11:18 am #206582

gardoku
Participant

Thanks! It solved my issue :)

November 1, 2015 at 3:36 pm #210422

neevypops
Participant

Height 100vh fixed this for me

#wrapper {
background: url(“image”)
no-repeat center center fixed !important;
background-size: cover !important;
height: 100vh !important;
overflow: hidden !important;
}

#main {
height:100vh !important;
overflow: scroll !important;
-webkit-overflow-scrolling: touch !important;

}
Author

Posts