There is a task to make an interactive background for the site so that it slightly moves from the mouse movement. Something like this . I know that there is a theme with this site, from there I took the JS code.

Initially, I did this:

$(".bg").interactive_bg(); 
 html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; } body { overflow: auto; } .bg { min-height: 100%; } 
 <div class="bg" data-ibg-bg="img/mp.jpg"></div>

Everything worked, but the problem was that everything I wrote on went beyond the background.

I decided to make the background straight in the body through CSS:

 body { background: url(img/mp.jpg) no-repeat center center fixed; background-size: cover; }

Now nothing works, I tried a bunch of options on how to apply to this background , but so far all has been unsuccessful.

Can I even do as I want, if I can, how, and how to turn to background ?

  • Where did you get the script for the interactive_bg function? Look, there still must be special styles for <div class="bg" data-ibg-bg="img/mp.jpg"></div> . They also need to apply. - Stepan Kasyanenko
  • @StepanKasyanenko I took cyberforum.ru/javascript/thread1371466.html here, they said it was called a ready-made jQuery Interactive BG plugin. At the beginning of the question there are styles for .bg. But this is not the problem, but the fact that now everything is not working, due to the fact that I do not know how to turn to the body background. - Svetlana Ermakova
  • @StepanKasyanenko didn’t understand you at first, I’m still registered <head type = "text / javascript" src = " onextrapixel.com/examples/interactive-background/js/… > in my head - Svetlana Ermakova
  • With the background it will most likely not work) On the site you specified, .bg2 has special styles. Look at them. - Stepan Kasyanenko

1 answer 1

It turned out: the jQuery Interactive BG plugin only works if it is like a background and there is no content on it. Through the body, too, could not be done. A very good person helped solve the problem using parallax.js

 <!DOCTYPE html> <html> <head> <!-- <link rel="stylesheet" type="text/css" href="style.css"> --> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <!-- <script type="text/javascript" src="http://www.onextrapixel.com/examples/interactive-background/js/jquery.interactive_bg.js"></script>--> <!-- <script src="js/parallax.js"></script>--> `<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script> <style type="text/css"> html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; } body { overflow: auto; text-align: center; } .bg { width: 105%; height: 105%; background:url(img/mp.jpg) center center no-repeat; background-size: cover; /* position: absolute; top: 5px; left: 5px; */ } .content-wrapper{ position: absolute; top: 0; left: 0; right: 0; margin: auto; min-height: 100vh; width: 100vw; z-index: 2; } .bg-wrapper { position: fixed; top: -30px; left: -30px; z-index: 1; width: 100vw; height: 100vh; } </style> </head> <body> <div class="bg-wrapper" id="scene" > <div class="bg" data-depth="0.2"></div> </div> <div class="content-wrapper"> <h1>TEXT TEXT TEXT </h1> <div class="info"> <a href="#">Контакты</a> <a href="#">Контакты</a> <a href="#">Контакты</a> <a href="#">Контакты</a> </div> </div> <!-- box-shadow: -10px 0 20px 5px rgba(0,0,0,0.3); для футера--> <script type="text/javascript"> // var parallax = new Parallax($("#parallax")); var scene = document.getElementById('scene'); var parallaxInstance = new Parallax(scene); </script> </body> </html>

Thank you all for the answers :)