- This topic has 51 replies, 1 voice, and was last updated 3 years, 10 months ago by
hc earwicker.
-
AuthorPosts
-
May 27, 2014 at 5:50 pm #171204
mqn
Participantsure..would love any solve to this..
October 13, 2014 at 8:08 am #186121tom_ano
ParticipantFound 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 #186327Mikkel
ParticipantI 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 #188978Mary
ParticipantThis 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 #188981Mary
Participantoh, 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 #191664darylbennett
ParticipantI’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 #191666Senff
ParticipantChrome 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 #203556stacigh
ParticipantI’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 ofcover
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 #203761pat35249
ParticipantYeah,given that the screen size of iOS devices.
August 12, 2015 at 5:04 pm #206463Voolu
ParticipantI 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 #206464Voolu
ParticipantPerfect! Thanks Very Much Sir!
August 13, 2015 at 7:30 pm #206523j_holtslander
ParticipantI 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 #206525Shikkediel
ParticipantThis 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 #206582gardoku
ParticipantThanks! It solved my issue :)
November 1, 2015 at 3:36 pm #210422neevypops
ParticipantHeight 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;}
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.