Move the background image on mouse over (Single Parallax)

I would like to make the background image move slightly on the X and Y axis when the mouse is in the "landing-content" DIV, it should move with the movement of the mouse. it should move inverse. EG. Mouse move down, "landing-content" image moves up.


<div id="landing-content">
<section class="slider"> 
<img src=""></img>


#landing-content {
overflow: hidden;
background-image: url(;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
max-height: 500px;
border-bottom: solid;
border-bottom-color: #628027;
border-bottom-width: 5px;

.slider {
margin-left: auto;
margin-right: auto;
overflow: hidden;
padding-top: 200px;
max-width: 1002px;

.slider img {
width: 80%;
padding-left: 10%;
padding-right: 10%;
height: auto;
margin-left: auto;
margin-right: auto;


Any help would be apprecated.


You could use the mousemove event, as shown in this fiddle.

    var amountMovedX = (e.pageX * -1 / 6);
    var amountMovedY = (e.pageY * -1 / 6);
    $(this).css('background-position', amountMovedX + 'px ' + amountMovedY + 'px');

It's just a quick example though, you'll have to play with the numbers yourself. ;)

You could achieve it like this

    var x = -(e.pageX + this.offsetLeft) / 20;
    var y = -(e.pageY + this.offsetTop) / 20;
    $(this).css('background-position', x + 'px ' + y + 'px');

Check this fiddle. I think you will find what you want.

    $(this).css('background-position',''+e.pageX/10+'px '+e.pageY/10+'px');

Need Your Help

Provide value on 'System.Windows.Markup.StaticResourceHolder' threw an exception

wpf user-controls

I am using

Tomcat vs Pivotal tc Server

java tomcat sts-springsourcetoolsuite spring-tool-suite tcserver

Could anyone advise as to the pros and cons of using Pivotal tc Server as opposed to just vanilla Tomcat for a Spring-MVC Java web application? Could find very little about Pivotal other than on th...