0
私は、マウスの動きで背景画像を移動させようとしました（オーバーレイされたコンテンツが一定のまま残っています）。フィドルの作品はhttps://jsfiddle.net/X7UwG/1538/ですが、私はそれを私のdjangoプロジェクトに戻します。 。すべての実際のプロジェクト環境（Django）ではマウスオーバーでバックグラウンド移動のJsfiddleの動作例が機能しません。
私は他の回答を参照しましたし、私はいただきました！間違って把握カント
<!doctype html>
{% load static %}
<html>
<head>
<style>
#landing-content {
background-size: 100%;
height: 90%;
width: 50%;
background-repeat: no-repeat;
}
</style>
<title>{% block title %}{% endblock title %}</title>
{% block linkrel %}<link rel="stylesheet" href="{% static 'courses/css/layout.css' %}">{% endblock linkrel %}
</head>
<body id="landing-content" background="{% static 'courses/images/back7.jpg' %}">
<section class="site-container slider">
<article class="glass down">
<div class="titleheader" style="width:100%;heigh t:80px;position:absolute;top:0;bottom:100%;left:0;right:0;background-color:rgba(229,240,247,0.7);border-width:1px;z-index:0;border-bottom-style:solid;border-color:#f0fafb;">
<a href="{% url 'views.hello_world' %}" class="titleheaderimg">
<img src="{% static 'courses/images/trendzlink_blue2.png' %}" alt="G" class="titleheaderimg" style="z-index:100;opacity:1;align-self:center;position:relative;top:9%;left:1%;">
</a>
</div>
</article>
{% block contentt %}{% endblock contentt %}
</section>
</body>
<script>
$('#landing-content').mousemove(function(e) {
var amountMovedX = (e.pageX * -1/6);
var amountMovedY = (e.pageY * -1/6);
$(this).css('background-position', amountMovedX + 'px ' + amountMovedY + 'px');
});
</script>
</html>
layout.htmlはhome.html（子テンプレート）に拡張しています。以来
{% extends "layout.html" %}
{% block title %}Home Page{% endblock %}
{% block contentt %}
<div style="height:100px;">
<p>
</p>
</div>
<div class="centrediv" style="width:720px;position:absolute;top:26%;bottom:45%;left:0%;right:0;margin:auto;background-color:rgba(229,240,247,0.7);border-radius:20px;border-color:#f0fafb;border-width:1px;">
<h2 style="text-align:center;vertical-align:middle;opacity:1">Hi,<span><br><br></span>We are a <span><a href="/courses/team/">XYZ based team</a></span> that works with educators to improve their efficiency using state-of-the-art language processing technology.<span></span>
<br><span><a href="/courses/product/">Know more.</a></span></h2>
</div>
<div class="centrediv" style="position:absolute;top:86%;bottom:0;left:47%;right:0;margin:auto;">
<h3><a href="/courses/contact/">Contact us.</a></h3>
</div>
{% endblock contentt %}
Any help would be greatly appreciated!