Alternatives to background-attachment: fixed

|▌冷眼眸甩不掉的悲伤 提交于 2019-12-01 21:04:30
    .bg 
    {
      background-image: url(bg.jpg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: fixed;
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: 0px;
      z-index: -1;
      -webkit-transform: translateZ(0);
      pointer-events: none;
    }

See this example: https://rawgit.com/arnaudbreton/background-fixed-chrome-rendering-issue/master/index-without-rendering-issue.html

Taken from: http://blog.mention.com/building-a-beautiful-homepage-how-we-nailed-down-chrome-performance-rendering-issues/

jQuery alternative to background-attachment:fixed; (be sure to have jQuery properly installed):

$(window).scroll(function() {
     var scrolledY = $(window).scrollTop();
     $('.sec1').css('background-position', 'center ' + ((scrolledY)) + 'px');
});

It is important to note that your background image must not be taller than the height of the div or things get thrown off.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!