background: fixed no repeat not working on mobile

by

I have found a great solution for fixed backgrounds on mobile devices requiring no JavaScript at all.

body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(photos/2452.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Please be aware of the negative z-index value of -10. html root element default z-index is 0. This value must be the smallest z-index to have it as background.

More Related Contents:

  1. Prevent ligatures in Safari (Mavericks/iOS7) via CSS
  2. Menu does not align correctly in Safari
  3. My Website is Mirror-flipped on iPhone Devices
  4. Flex / Grid layouts not working on button or fieldset elements
  5. How to replicate background-attachment fixed on iOS [duplicate]
  6. How can I “disable” zoom on a mobile web page?
  7. Fixed background image with ios7
  8. Make an image responsive – the simplest way [duplicate]
  9. Background image not showing in Safari
  10. How do I remove the blue styling of telephone numbers on iPhone/iOS?
  11. Height of flex container not working properly in Safari
  12. Responsive order confirmation emails for mobile devices?
  13. Auto height on parent container with Absolute/Fixed Children
  14. How do I make flex box work in safari?
  15. CSS calc not working in Safari and fallback
  16. chrome/safari display border around image
  17. Multiple select in Safari iOS 7
  18. Select size attribute size not working in Chrome/Safari?
  19. CSS Grid Row Height Safari Bug
  20. vertical-align with Bootstrap 3
  21. How to align content of a div to the bottom
  22. Html/Css Triangle with pseudo elements
  23. Text not centered with justify-content: center
  24. Position sticky on thead
  25. screen styling when virtual keyboard is active
  26. CSS Selector “(A or B) and C”?
  27. How to darken a background using CSS?
  28. How to change one element while hovering over another with CSS
  29. How to make CSS Grid items take up remaining space?
  30. Link external CSS file only for specific Div [duplicate]

Leave a Comment