image

iPhone and other iOS-based devices have not enabled the fixed position of background, they would have particular reason for that. This functionality not working on iPad, iPhone and other Apple products.

The image will be fixed in background of a DIV, giving a sort of parallax effect, on all browsers and devices excepted but iOS will not support that. This means that your website will not look the same on android and iOS devices.

Background attachment fixed position woking fine on all screens.

iPhone and other iOS issues fixeed for background position fixed.

When you are applying cover sizing of image on a box and wish to enhance the whole background with the scrolling effect with parallax effect, it won't support on iPhone browsers.

Background attachment fixed position woking fine on all screens.

iPhone and other iOS issues fixeed for background position fixed.

We have an easy solution for that, with CSS tricks. You can also try on your webpage.

.bg-fixed {
	-webkit-clip-path: inset(0 0 0 0);
	clip-path: inset(0 0 0 0);
	background-size: 0px !important;
	overflow: hidden;
	position: relative;
}


.bg-fixed:before {
  background-image: inherit !important;
  background-repeat: inherit !important;
  background-size: cover;
  background-position: inherit;
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1 !important;
  will-change: transform;
  pointer-events: none;
}

Copy above CSS code and apply to your webpage, it will work for all devices.

This is a simple CSS trick and we can get perfect results for parallax effect on iOS devices.

If you still have any query or you need help then please contact us here

Be notified when we add a new articles