.skin-ads {
// background: url($skin-ads-bg) no-repeat fixed;
background: url($skin-ads-img) no-repeat fixed;
background-color: $default-bg;
padding-top: 300px;
background-position: center 140px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-transition: all .5s .2s ease-in-out;
-o-transition: all .5s .2s ease-in-out;
-moz-transition: all .5s .2s ease-in-out;
transition: all .5s .2s ease-in-out;
@media (min-width: $break_d_common_lg) and (max-width: $break_d_common_lg) {
padding-top: 375px;
}
@media (min-width: $break_d_common_md) and (max-width: $break_d_common_md) {
padding-top: 287px;
}
@media (min-width: $break_d_common_sm) and (max-width: $break_d_common_sm) {
padding-top: 245px;
}
@media (min-width: $break_d_md) and (max-width: $break_d_md ) {
padding-top: 191px;
}
@media (min-width: $break_tablet) and (max-width: $break_tablet ) {
padding-top: 156px;
background-position: center 185px;
}
@media (min-width: $break_tablet) and (max-width: $break_tablet ) {
padding-top: 156px;
background-position: center 185px;
}
@media (max-width: $break_pre_tablet ) {
padding-top: 15px;
background: $default-bg;
}
&.pos-fixed {
background-position: center -125px;
}
}
Add transition on background upon scrolling ( add .pos-fixed class upon scrolling with js)