Fixed background image with ios7

by

Using background-attachment: fixed with background-size: cover causes issues on most mobile browsers (as you’ve seen). You can try using background-attachment: scroll. This won’t give your desired effect, but you’ll see the images at least. You could use a media-query or two to limit it to devices that are tablets or phones by using @media screen and (max-device-width: 1024px){}

OR

You can use background-position: scroll and include some javascript that will keep the image at the scrolled position (keeping it at the top of the window): DEMO

More Related Contents:

  1. What are the steps to make a HTML design responsive? [closed]
  2. Can I set an opacity only to the background image of a div?
  3. Why are my CSS3 media queries not working on mobile devices?
  4. How to replicate background-attachment fixed on iOS [duplicate]
  5. Why does styling the background of the body element affect the entire screen?
  6. IE8 support for CSS Media Query
  7. Is it possible to put CSS @media rules inline?
  8. Is it possible to have two background colors for a single html element? [duplicate]
  9. Why the content is not covered by the background of an overlapping element?
  10. background: fixed no repeat not working on mobile
  11. Media Queries for Different zoom Levels of Browser
  12. Color of stacked semi-transparent boxes depends on order?
  13. CSS media queries for screen sizes
  14. How do I remove the blue styling of telephone numbers on iPhone/iOS?
  15. Stretch background image css?
  16. Is there a way to use use text as the background with CSS?
  17. CSS Background image not loading
  18. Fit website background image to screen size
  19. How to create a Slanted Background with CSS? [duplicate]
  20. How to change the inner white color of Font Awesome’s exclamation triangle icon?
  21. What can be other ways than @media to make a website responsive suitably if I don’t mention target resolution? [closed]
  22. How to center a (background) image within a div?
  23. Force iframe YouTube video to center fit and full cover the screen in the background using HTML5 CSS3
  24. how to make responsive website for all devices [closed]
  25. How to add a background image on top of a previous background image?
  26. Media queries not working inside an iframe
  27. Can flexbox detect when a flex item wraps?
  28. @media queries and image swapping [closed]
  29. Prevent ligatures in Safari (Mavericks/iOS7) via CSS
  30. The difference between HTML media queries and CSS media queries

Leave a Comment