I make a layout with Materialize CSS. I do not like the built-in parallax , I decided to do the custom (working version, I implemented it more than once).

I can’t understand, I’m implementing it here, a band appears (the background is duplicated), disappears, if you remove fixed , but parallax itself does not work like this:

 function Parallax() { var scrolled = $(window).scrollTop() + 1; $('.stat-slid-prlx').css('background-position', '15' + -(scrolled * 0.3) + 'px'); } $(window).scroll(function (e) { Parallax(); });

My block.

 <div class="stat-slid-prlx " style="background: url(http://www.cok-rf.ru/img/first_level/4_p.jpg) fixed;" ></div>

    1 answer 1

    image size does not fit the background and on most screens will fill the background repeating. Treat as follows:

     .stat-slid-prlx{ background-image: url(http://www.cok-rf.ru/img/first_level/4_p.jpg); background-attachment: fixed; background-size: cover; background-position: top; }

    The only thing is that you need to customize the plugin so that it lays the background on the block not so much - background: url(http://www.cok-rf.ru/img/first_level/4_p.jpg) fixed, and so - background-image: url(http://www.cok-rf.ru/img/first_level/4_p.jpg);

    ZY I did not understand why parallax was involved. There's just background-attachment: fixed;

    • So he duplicates, I tried it. - zkolya pm
    • You can also clarify, you said что бы он ложил фон without fixed . If I understand you correctly, this is not in the plugin, it is attributed to the block itself - zkolya
    • @zkolya is now online for the .stat-slid-prlx block, the background: url style is generated ( cok-rf.ru/img/first_level/4_p.jpg ). He is clearly dynamic. And to describe the background properties in more detail, it is better to use background-image instead of background. That initially background: url (...) is fixed, then = background-attachment: fixed. And I propose to disable the so-called. parallax (it is there in fact and not, there is the usual fixed for the background) and use the native css, as in the answer. - Kirill Korushkin
    • @zkolya I checked the answer on the site by reference - in this case, the image of the embankment is stretched to the whole block, but it loses much of quality. Or do you want it to be repeated? - Kirill Korushkin
    • No, I don’t need to duplicate it. If you look here at cok-rf.ru/o_nezavisimoi_ocenke.php , for example, everything is exactly the same and the parallax works fine as it should - zkolya