I have a problem with fixed background in a specific section of a Wordpress website I'm working on. Here's the link
The background is fixed on PC, but on iOS and chrome android its not fixed and will scroll with content.
I've set these custom CSS for #biography
Section but still doesn't work:
@media only screen and (max-width: 768px) {
#biography {
background: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url(http://yeganehhosseininia.com/wp-content/uploads/2018/04/Yeganeh3.jpg) center center !important;
webkit-background-position: center center !important;
-moz-background-position: center center !important;
-o-background-position: center center !important;
background-position: center center !important;
background-repeat: no-repeat !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
-webkit-background-attachment: fixed !important;
-moz-background-attahcment: fixed !important;
-o-background-attachment: fixed !important;
background-attachment: fixed !important;
}
}
@media only screen and (min-width: 768px) {
#biography {
background: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url(http://yeganehhosseininia.com/wp-content/uploads/2019/05/Yeganeh2.jpg) !important;
-webkit-background-position: center center !important;
-moz-background-position: center center !important;
-o-background-position: center center !important;
background-position: center center !important;
background-repeat: no-repeat !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
-webkit-background-attachment: fixed !important;
-moz-background-attahcment: fixed !important;
-o-background-attachment: fixed !important;
background-attachment: fixed !important;
}
}