- This topic has 51 replies, 1 voice, and was last updated 4 years, 3 months ago by hc earwicker.
-
AuthorPosts
-
May 27, 2014 at 5:50 pm #171204mqnParticipant
sure..would love any solve to this..
October 13, 2014 at 8:08 am #186121tom_anoParticipantFound 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 #186327MikkelParticipantI 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 #188978MaryParticipantThis 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 #188981MaryParticipantoh, 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 #191664darylbennettParticipantI’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 #191666SenffParticipantChrome 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 #203556stacighParticipantI’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 #203761pat35249ParticipantYeah,given that the screen size of iOS devices.
August 12, 2015 at 5:04 pm #206463VooluParticipantI 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 #206464VooluParticipantPerfect! Thanks Very Much Sir!
August 13, 2015 at 7:30 pm #206523j_holtslanderParticipantI 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 #206525ShikkedielParticipantThis 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 #206582gardokuParticipantThanks! It solved my issue :)
November 1, 2015 at 3:36 pm #210422neevypopsParticipantHeight 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.