The reason that the background div is expanding beyond the limits of the container is because, by using transform: translate(...), you are moving the background outside the container.
If, instead of moving the background beyond the container, you want to move the background and clip its edges to match the container, you will likely need to use some form of overflow: hidden, which prevents the container from showing anything outside its bounds.
In the case of the code you posted, you can simply add overflow: hidden to the body element:
body {
overflow: hidden
}
However, you may not necessarily want to add overflow: hidden to the body if you need to allow overflow somewhere else on the page. In that case, you can wrap your #home and #menu sections in a div that has overflow: hidden applied to it. Note that you also need to add position: relative to this div for it to work.
For example, here is an updated version of your HTML:
<div class="container">
<section id="home">
<div id="home-background"></div>
<div id="greeting">
<h1>Hello</h1>
</div>
</section>
<section id="menu">
<ul>
<li><a href="#home">Home</a></li>
</ul>
</section>
</div>
And the corresponding CSS:
.container {
overflow: hidden;
position: relative;
}
Here is a code snippet demonstrating this solution:
var lFollowX = 0,
lFollowY = 0,
x = 0,
y = 0,
friction = 1 / 60;
function moveBackground() {
x += (lFollowX - x) * friction;
y += (lFollowY - y) * friction;
translate = 'translate(' + x + 'px, ' + y + 'px) scale(1.1)';
$('#home-background').css({
'-webit-transform': translate,
'-moz-transform': translate,
'transform': translate
});
window.requestAnimationFrame(moveBackground);
}
$(window).on('mousemove click', function(e) {
var lMouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX));
var lMouseY = Math.max(-100, Math.min(100, $(window).height() / 2 - e.clientY));
lFollowX = (20 * lMouseX) / 100; // 100 : 12 = lMouxeX : lFollow
lFollowY = (10 * lMouseY) / 100;
});
moveBackground();.container {
overflow: hidden;
position: relative;
height: 300px;
}
#home-background {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: url("https://www.tokkoro.com/picsup/5746854-geometry-wallpapers.jpg") no-repeat center center;
background-size: cover;
z-index: -1;
}
#menu {
display: flex;
justify-content: center;
align-items: center;
background-color: #251524;
height: auto;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<section id="home">
<div id="home-background"></div>
<div id="greeting">
<h1>Hello</h1>
</div>
</section>
<section id="menu">
<ul>
<li><a href="#home">Home</a></li>
</ul>
</section>
</div>