CSS background-size: cover replacement for Mobile Safari

by

I have had a similar issue recently and realised that it’s not due to background-size:cover but background-attachment:fixed.

I solved the issue by using a media query for iPhone and setting background-attachment property to scroll.

For my case:

.cover {
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;

    @media (max-width: @iphone-screen) {
        background-attachment: scroll;
    }
}

Edit: The code block is in LESS and assumes a pre-defined variable for @iphone-screen. Thanks for the notice @stephband.

More Related Contents:

  1. How do I remove the blue styling of telephone numbers on iPhone/iOS?
  2. Turn off iPhone/Safari input element rounding
  3. Two column width 50% css [closed]
  4. vertical-align with Bootstrap 3
  5. One flex/grid item sets the size limit for siblings
  6. How to align content of a div to the bottom
  7. CSS Pseudo-classes with inline styles
  8. Are the decimal places in a CSS width respected?
  9. How to apply a style to an embedded SVG?
  10. How do I get this CSS text-decoration override to work?
  11. Why does position:relative; appear to change the z-index?
  12. Color for Unicode Emoji
  13. Browser Caching of CSS files
  14. Flexbox and Internet Explorer 11 (display:flex in ?)
  15. How to keep footer at bottom of screen [duplicate]
  16. How to give the background-image path in CSS?
  17. Bootstrap – 5 column layout
  18. Is there a way to get a web page header/footer printed on every page?
  19. How to implement curve background in CSS? [duplicate]
  20. How to prevent text from overflowing in CSS?
  21. How to darken a background using CSS?
  22. How to keep :active css style after click a button
  23. How to make CSS Grid items take up remaining space?
  24. CSS attribute selector does not work a href
  25. Make a perfect circle around a div of variable height
  26. How To Add CSS3 Transition With HTML5 details/summary tag reveal?
  27. How can I make Bootstrap 4 columns all the same height? [duplicate]
  28. Changing image src depending on screen size
  29. Balanced text wrapping in HTML
  30. How to center-justify the last line of text in CSS?

Leave a Comment