Fake background transparency/effects without fixed positioning_问答_开发者

Fake background transparency/effects without fixed positioning

开发者 https://www.devze.com 2023-01-14 17:17 出处：网络

I\'m trying to emulate this effect: http://meyerweb.com/eric/css/edge/complexspiral/demo.html o开发者_运维技巧n my blog: http://segment6.blogspot.com/

相关专题：background css

I'm trying to emulate this effect: http://meyerweb.com/eric/css/edge/complexspiral/demo.html o开发者_运维技巧n my blog: http://segment6.blogspot.com/

It works, but with one problem: Firefox lags really badly scrolling the page. If I make the background attachment not "fixed", it no longer lags, but the effect doesn't work. Can this effect be achieved without fixed positioning or the lag somehow cured?

I've tried using background-position with percentages but it seems to position based on the width of the element, not the width of the page, so I can't line it up correctly for varying window sizes.

You could wrap your complete body content in an additional DIV:

<body>
    <div id="content-container>
    ...
    </div>
</body>

Then you set the following styles in CSS:

html, body {
    overflow:hidden;
    height:100%;
}

div#content-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: auto;
}

Now it is the wrapping container DIV which carries the scroll bars. Thus the body with the background image will stay fixed when scrolling the content.